这篇文章主要介绍了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(引入方式按照实际项目要求来)
<style>*{margin:0; padding:0;}#test{border:1px solid #ccc; background: #eee; margin:20px 30px;}</style><p><button id="start">start</button></p><canvas id='test' width="600" height="200"></canvas><script type="text/javascript" src='js/jquery-2.1.4.min.js'></script><script type="text/javascript" src='js/number.js'></script>
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();});
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
使用angular如何实现表格过滤
有关vue.js如何实现无限滚动加载
chrome firefox 自带调试工具调试（详细教程）
以上就是在canvas中如何实现轨迹回放功能的详细内容。