How to implement trajectory playback in canvas

This time I will show you how to implement trajectory playback on canvas, and what are the precautions for implementing trajectory playback on canvas. The following is a practical case, let's take a look.

This article analyzes the process of realizing the canvas track playback function in detail through json structure, HTML code and JS code. The following is the full content.

json structure

[
  {
    "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

Import json as a js file and assign it to the global variable testPath (the introduction method is based on the actual project requirements)

<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=&#39;test&#39; width="600" height="200"></canvas>
<script type="text/javascript" src=&#39;js/jquery-2.1.4.min.js&#39;></script>
<script type="text/javascript" src=&#39;js/number.js&#39;></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();
});

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use vue mixins and extends

##vue.js vue-router improves user experience

The above is the detailed content of How to implement trajectory playback in canvas. For more information, please follow other related articles on the PHP Chinese website!