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

以上就是本次文章的全部内容，如果大家在测试的时候还有什么疑问，可以在下方的留言区讨论。