本文通過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();});