时间:2021-05-28
本文通过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();});以上就是本次文章的全部内容,如果大家在测试的时候还有什么疑问,可以在下方的留言区讨论。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言实现轨迹回放,GMap.NET有对应的类GMapRoute。这个类函数很少,功能有限,只能实现简单的轨迹回放。要实现更复杂的轨迹回放,就需要自己动手了。本文
在微信小程序实现轨迹回放的效果1、wxml开始暂停结束2、js//index.js//获取应用实例constapp=getApp()Page({data:{St
首先要确认电视机顶盒是否支持回看功能,只有具有交互式点播功能的电视才可以使用回放功能。因为回放是基于数字IP网络进行点对点传输信号实现回放的,原理和宽带视频和数
先看下微信小程序canvas拖拽功能组件地址github.com/jasondu/wx-…readme近期补上实现效果如何实现使用canvas使用movable
在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场前言微信小程序canvas实现签名功能核心内容简介:(1)签名实现,开始,移动,结