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(); });
以上就是本次文章的全部内容,如果大家在测试的时候还有什么疑问,可以在下方的留言区讨论。
推荐阅读
-
Android编程实现canvas绘制柱状统计图功能【自动计算宽高及分度值、可左右滑动】
-
Android编程实现canvas绘制饼状统计图功能示例【自动适应条目数量与大小】
-
html5使用canvas实现图片下载功能的示例代码
-
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
-
探究 canvas 绘图中撤销(undo)功能的实现方式详解
-
详解通过变换矩阵实现canvas的缩放功能
-
html5使用canvas实现图片下载功能的示例代码
-
基于JavaScript实现每日签到打卡轨迹功能
-
探究 canvas 绘图中撤销(undo)功能的实现方式详解
-
video结合canvas实现视频在线截图功能