canvas 轨迹回放

最近作的项目须要实现一个轨迹回放功能，本身没有这方面的经验，网上搜索以后也只发现了这篇文章有所说起——canvas轨迹回放，他是先搜集轨迹点，而后再回放，个人需求比较简单，轨迹点后台提供，我只须要动态画出来就行，复杂度下降了不少，主要借鉴了绘图方法——使用setInterval方法递归实现。

制做过程当中发现原文章中json结构中的timer属性只是用来作条件判断的，并非原先本身理解的是一个时间流数据，轨迹回放的快慢跟生成的轨迹个数多少有关（画的慢轨迹点多，画的快轨迹点少）。

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();
});

https://jsfiddle.net/99g4cg3k/
参考文章