這篇文章主要介紹了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(引入方式按照實際專案要求來)
#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(); });
上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
以上是在canvas中如何實現軌跡回放功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
