这次给大家带来canvas怎么实现轨迹回放，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();
});
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue mixins与extends的使用方法
vue.js vue-router提升用户体验
以上就是canvas怎么实现轨迹回放的详细内容。