当前位置:主页 > javascript教程 > canvas轨迹回放功能实现

canvas轨迹回放功能的实现代码和方法

发布:2019-11-23 17:19:25 186


为网友们分享了canvas相关的编程文章,网友赖建中根据主题投稿了本篇教程内容,涉及到canvas、轨迹回放、canvas轨迹回放功能实现相关内容,已被100网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。

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

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


参考资料

相关文章

  • 原生JS使用Canvas实现拖拽式绘图功能

    发布:2022-07-12

    给大家整理了关于javascript的教程,这篇文章主要介绍了原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下


  • Android利用Canvas类绘制图形

    发布:2023-03-12

    这篇文章主要为大家详细介绍了Android利用Canvas类绘制图形,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • javaScript canvas实现绘画工具的实例详解

    发布:2020-06-18

    下面小编就为大家分享一篇javaScript canvas实现(画笔大小 颜色 橡皮的实例),具有很好的参考价值,希望对大家有所帮助


  • 微信小程序canvas绘制圆角base64图片的方法浅析

    发布:2020-01-06

    这篇文章主要介绍了微信小程序canvas绘制圆角base64图片的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习


  • canvas实现知乎登录页背景效果代码实例

    发布:2020-05-05

    本篇文章主要介绍了canvas简单快速实现知乎登录页背景效果的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧


  • JavaScript之Canvas

    JavaScript之Canvas

    发布:2022-06-19

    给大家整理一篇关于JavaScript的教程,这篇文章主要介绍了JavaScript之Canvas,Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等


  • 基于vue+canvas的excel-like组件实例详解

    基于vue+canvas的excel-like组件实例详解

    发布:2023-02-28

    给大家整理了关于vue的教程,a vue component,基于vue的表格组件,主要解决大数据量的表格渲染性能问题,使用canvas绘制表格,同时支持类似excel的批量选中,复制黏贴删除,实时编辑等功能.这篇文章主要介绍了基于vue+canv


  • canvas实现图片根据滑块放大缩小的代码

    发布:2020-01-25

    本文主要介绍了canvas实现图片根据滑块放大缩小效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧


网友讨论