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/
參考文章