canvas轨迹回放功能实现

2023-09-19 03:45:05 332

[ { "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 } ] } ]

$('#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

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

canvas轨迹回放功能实现

热门推荐

随机推荐