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 firefox兼容ie的dom方法脚本
May 18 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
很棒的vue弹窗组件
May 24 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
Vue3.0的优化总结
Oct 16 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 empty函数 使用说明
2009/08/10 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
php简单判断文本编码的方法
2015/07/30 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
python3爬虫之设计签名小程序
2018/06/19 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
护士自荐信
2013/10/25 职场文书
2014年收银工作总结
2014/11/13 职场文书
一般纳税人申请报告
2015/05/18 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs