canvas轨迹回放功能实现

网友投稿 467 2023-03-05


canvas轨迹回放功能实现

本文通过json机构,HTML代码以及JS代码详细给大家分析了canvas轨迹回放功能实现的过程,以下是全部内容。

json结构

[

{

"path": [

{

"x": 82,

"y": 43

},

{

"x": 83,

"y": 43

},

{

"x": 84,

"y": 45

},

{

"x": 86,

"y": 47

},

{

"x": 86,

"y": 49

},

{

"x": 86,

"y": 54

},

{

"x": 86,

"y": 59

},

{

"x": 86,

"y": 64

},

{

"x": 86,

"y": 69

},

{

"x": 86,

"y": 74

},

{

"x": 86,

"y": 78

},

{

"x": 86,

"y": 83

},

{

"x": 86,

"y": 87

},

{

"x": 86,

"y": 89

},

{

"x": 86,

"y": 91

},

{

"x": 86,

"y": 92

},

{

"x": 86,

"y": 93

},

{

"x": 86,

"y": 94

},

{

"x": 86,

"y": 95

}

]

},

{

"path": [

{

"x": 129,

"y": 36

},

{

"x": 129,

"y": 39

},

{

"x": 129,

"y": 44

},

{

"x": 129,

"y": 49

},

{

"x": 129,

"y": 54

},

{

"x": 129,

"y": 59

},

{

"x": 128,

"y": 65

},

{

"x": 127,

"y": 73

},

{

"x": 125,

"y": 78

},

{

"x": 125,

"y": 81

},

{

"x": 124,

"y": 88

},

{

"x": 123,

"y": 91

},

{

"x": 123,

"y": 94

},

{

"x": 123,

"y": 96

},

{

"x": 123,

"y": 97

},

{

"x": 123,

"y": 98

},

{

"x": 123,

"y": 99

},

{

"x": 122,

"y": 100

}

]

}

]

html

将json作为js文件引入,并将其赋值给全局变量testPath(引入方式按照实际项目要求来)

js

$('#start').click(function(event) {

var lineIndex = 0,pointIndex = 0,line2;

var obj = document.getElementById('test');

var cxt = obj.getContext('2d');

cxt.lineWidth = 1;

cxt.strokeStyle = 'red';

cxt.lineCap = 'round';

cxt.clearRect(0,0,600,200);

function drawBegin(){

cxt.beginPath();

pointIndex=0;

var intervalHandle = window.setInterval(function () {

line2 = testPath[lineIndex].path[pointIndex];

if (!line2) {

window.clearInterval(intervalHandle);

if (lineIndex < testPath.length - 1) {

lineIndex = lineIndex + 1;

drawBegin();

}

}else{

if (pointIndex == 0) {

cxt.moveTo(line2.x, line2.y);

}

pointIndex = pointIndex + 1;

cxt.lineTo(line2.x, line2.y);

cxt.stroke();

}

},0);

}

drawBegin();

});

以上就是本次文章的全部内容,如果大家在测试的时候还有什么疑问,可以在下方的留言区讨论。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:JAVA实现感知器算法
下一篇:接口测试的测试用例实例(接口测试的测试用例实例怎么写)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~