一， 总体思路
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