Canvas 實現流程動效

阿新 • • 發佈：2021-06-18

一，總體思路

　　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"

			// 畫藍色背景線
			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")

		}

		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