一， 總體思路
canvas動效實現，主要分為兩步：
1> 實現畫靜態圖函數，用於定時器反復調用。
2> 通過定時器setInterval()，定時調用畫靜態圖函數。動效就是一次次的繪制靜態圖，而每一次繪制靜態圖，都改變繪制的位置，從而實現動效。
canvas 基礎知識這里不再搬運，想了解的自行搜索。
二， 實現效果
三， 源碼
完整代碼， 可運行
完全自己寫的，暫未優化， 歡迎大佬指點，交流
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id='canvas' width="1500px" height="500px"></canvas> <script type="text/javascript"> var canv = document.getElementById('canvas') var ctx = canv.getContext('2d') var moveCount1 = 0 ,moveCount2 = 0, moveCount3 = 0, moveCount4 = 0, moveCount5 = 0, moveCount6 = 0, moveCount7 = 0, moveCount8 = 0, moveCount9 = 0 // 每段黃色線正向移動次數 setInterval(function(){ // 實現移動 ctx.clearRect(0,0,1500,500) if(moveCount1 < 27) { moveCount1++ } else { moveCount1 = 0 } if(moveCount2 < 8) { moveCount2++ } else { moveCount2 = 0 } if(moveCount3 < 7) { moveCount3++ } else { moveCount3 = 0 } if(moveCount4 < 6) { moveCount4++ } else { moveCount4 = 0 } if(moveCount5 < 20) { moveCount5++ } else { moveCount5 = 0 } if(moveCount6 < 20) { moveCount6++ } else { moveCount6 = 0 } if(moveCount7 < 8) { moveCount7++ } else { moveCount7 = 0 } if(moveCount8 < 6) { moveCount8++ } else { moveCount8 = 0 } if(moveCount9 < 26) { moveCount9++ } else { moveCount9 = 0 } drawStatic() // 畫黃色線 走向不同 具體計算也不同 所以調了不同方法 draMoveLineTop(moveCount1, 197, 249, 212, 235, 4, "#FFEC21") draMoveLineBotRight(moveCount2, 350, 100, 370, 120, 4, "#FFEC21") draMoveLineBotLeft(moveCount3, 410, 155, 390, 175, 4, "#FFEC21") draMoveLineTop(moveCount4, 410, 155, 435, 130, 4, "#FFEC21") draMoveLineBotRight(moveCount5, 350, 215, 370, 235, 4, "#FFEC21") draMoveLineBotRight(moveCount6, 465, 100, 485, 120, 4, "#FFEC21") draMoveLineTop(moveCount7, 476, 342, 496, 322, 4, "#FFEC21") draMoveLineBotLeft(moveCount7, 592, 228, 572, 248, 4, "#FFEC21") draMoveLineBotRight(moveCount8, 532, 287, 552, 307, 4, "#FFEC21") draMoveLineTop(moveCount9, 591, 345, 610, 327, 4, "#FFEC21") }, 100) function drawStatic(){ // 畫靜態圖 藍色背景線 ctx.fillRect(0, 0, 1500, 500) ctx.fillStyle = "#eee" // 畫藍色背景線 由9條線段組成 所以調用了9次 drawLine(197, 247, 350, 100, 2, "#006EC3") drawLine(350, 100, 408, 157, 2, "#006EC3") drawLine(410, 155, 350, 215, 2, "#006EC3") drawLine(350, 215, 477, 342, 2, "#006EC3") drawLine(410, 155, 465, 100, 2, "#006EC3") drawLine(465, 100, 593, 228, 2, "#006EC3") drawLine(476, 342, 592, 228, 2, "#006EC3") drawLine(532, 287, 590, 345, 2, "#006EC3") drawLine(590, 345, 740, 200, 2, "#006EC3") } // cVar 移動次數 sW 起始點X軸坐標 sH 起始點Y軸坐標 eW 端點X軸坐標 eH 端點Y軸坐標 lW 線寬 color 線的顏色 function draMoveLineTop(cVar,sW, sH, eW, eH, lW, color ){ // 畫斜向上用於移動的線 drawLine(cVar*5+sW, sH-cVar*5, cVar*5+eW, eH-cVar*5, lW, color) } function draMoveLineBotRight(cVar,sW, sH, eW, eH, lW, color ){ // 畫斜向下用於移動的線 drawLine(cVar*5+sW, sH+cVar*5, cVar*5+eW, eH+cVar*5, lW, color) } function draMoveLineBotLeft(cVar,sW, sH, eW, eH, lW, color ){ // 畫斜向下用於移動的線 drawLine(sW-cVar*5, sH+cVar*5, eW-cVar*5, eH+cVar*5, lW, color) } function drawLine(sW, sH, eW, eH, lW, color) { // 畫線函數 ctx.beginPath() ctx.moveTo(sW,sH); ctx.lineTo(eW,eH); ctx.lineWidth = lW ctx.strokeStyle = color ctx.stroke(); ctx.closePath() } </script> </body> </html>
17:04:20 2021-06-18