canvas轨迹回放功能实现


Posted in Javascript onDecember 20, 2017

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

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

Javascript 相关文章推荐
javascript控制swfObject应用介绍
Nov 29 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
深入探究node之Transform
Jul 20 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 #jQuery
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 #Javascript
浅谈gulp创建完整的项目流程
Dec 20 #Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 #Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 #Javascript
详解JS模块导入导出
Dec 20 #Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 #Javascript
You might like
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
javascript控制台详解
2015/06/25 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python 中字典嵌套列表的方法
2018/07/03 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
django最快程序开发流程详解
2019/07/19 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
管理部部长岗位职责
2013/12/05 职场文书
预备党员的自我评价
2014/03/12 职场文书
终止合同协议书
2014/04/17 职场文书
社区健康教育工作方案
2014/06/03 职场文书
归元寺导游词
2015/02/06 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang