在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 自带调试工具调试（详细教程）