canvas軌跡回放功能實現(xiàn)
本文通過json機構(gòu),HTML代碼以及JS代碼詳細給大家分析了canvas軌跡回放功能實現(xiàn)的過程,以下是全部內(nèi)容。
json結(jié)構(gòu)
[ { "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(); });
以上就是本次文章的全部內(nèi)容,如果大家在測試的時候還有什么疑問,可以在下方的留言區(qū)討論。
相關(guān)文章
Object.keys()、Object.values()、Object.entries()用法總結(jié)
本文主要介紹了Object.keys()、Object.values()、Object.entries()用法總結(jié),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04JavaScript中break、continue和return的用法區(qū)別實例分析
這篇文章主要介紹了JavaScript中break、continue和return的用法區(qū)別,結(jié)合實例形式詳細對比分析了JavaScript中break、continue和return的基本功能、使用方法、區(qū)別與操作注意事項,需要的朋友可以參考下2020-03-03常用Javascript函數(shù)與原型功能收藏(必看篇)
下面小編就為大家?guī)硪黄S肑avascript函數(shù)與原型功能收藏(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10javascript 靜態(tài)對象和構(gòu)造函數(shù)的使用和公私問題
靜態(tài)對象和構(gòu)造函數(shù)的使用區(qū)別 平常我們會經(jīng)常使用JSON形式,或者var obj=function(){}亦或function(){}這么幾種對象的構(gòu)建辦法,有時會認為這是等價的辦法,然而他們還有不同。2010-03-03