欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

canvas轨迹回放功能实现

程序员文章站 2022-10-26 19:33:54
本文通过json机构,html代码以及js代码详细给大家分析了canvas轨迹回放功能实现的过程,以下是全部内容。 json结构 [ { "pa...

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

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