canvas如何实现轨迹回放功能

这篇文章将为大家详细讲解有关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(引入方式按照实际项目要求来)

<style>
*{margin:0;padding:0;}
#test{border:1pxsolid#ccc;background:#eee;margin:20px30px;}
</style>
<p><buttonid="start">start</button></p>
<canvasid='test'width="600"height="200"></canvas>
<scripttype="text/javascript"src='js/jquery-2.1.4.min.js'></script>
<scripttype="text/javascript"src='js/number.js'></script>

js

$('#start').click(function(event){
varlineIndex=0,pointIndex=0,line2;
varobj=document.getElementById('test');
varcxt=obj.getContext('2d');
cxt.lineWidth=1;
cxt.strokeStyle='red';
cxt.lineCap='round';
cxt.clearRect(0,0,600,200);
functiondrawBegin(){
cxt.beginPath();
pointIndex=0;
varintervalHandle=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();
});

关于“canvas如何实现轨迹回放功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。