***** ``` (function () { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function () { callback(currTime + timeToCall); }; timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) { clearTimeout(id); }; }()); (function(){ var c = document.getElementById("myCanvas"); //重設寬高，解決線條模糊問題 c.width = c.offsetWidth; c.height = c.offsetHeight; var ctx = c.getContext("2d"); // ctx.lineCap = "round";//繪制圓形的結束線帽 //變量，用于保存動畫中已經過了多少幀 var t = 1; // 定義繪圖路徑，關鍵拐點坐標 var vertices = []; vertices.push({ x: 0, y: 291 }); vertices.push({ x: 155, y: 89 }); vertices.push({ x: 375, y: 390 }); vertices.push({ x: 617, y: 57 }); vertices.push({ x: 666, y: 145 }); vertices.push({ x: 750, y: 5 }); //獲取頁面字體大小，兼容移動端 var fontSize = parseInt(document.getElementsByTagName('html')[0].style.fontSize)/25; //設置線條樣式 ctx.lineWidth = 3;//設置線條寬度 ctx.strokeStyle = 'rgba(127,0,16,.2)'; // 告訴畫布你正在開始一條新路 ctx.beginPath(); ctx.moveTo(0*fontSize, 306*fontSize); ctx.lineTo(155*fontSize, 104*fontSize); ctx.lineTo(375*fontSize, 405*fontSize); ctx.lineTo(617*fontSize, 72*fontSize); ctx.lineTo(666*fontSize, 160*fontSize); ctx.lineTo(750*fontSize, 20*fontSize); // 開始繪制 ctx.stroke(); // 設置樣式 ctx.lineWidth = 2; ctx.strokeStyle = "#fff"; // 計算沿路徑的增量點 var points = calcWaypoints(vertices); // 使用動畫從開始到結束延長線條 animate(points); // 計算沿頂點行進的航路點 function calcWaypoints(vertices) { var waypoints = []; for (var i = 1; i < vertices.length; i++) { var pt0 = vertices[i - 1]; var pt1 = vertices[i]; var dx = pt1.x - pt0.x; var dy = pt1.y - pt0.y; for (var j = 0; j < 100; j++) { var x = (pt0.x + dx * j / 100)*fontSize; var y = (pt0.y + dy * j / 100)*fontSize; waypoints.push({ x: x, y: y }); } } // console.log(waypoints); return (waypoints); } function animate() { if (t < points.length - 1) { requestAnimationFrame(animate); } // 從最后一個航點畫一條線段到目前的航點 ctx.beginPath(); ctx.moveTo(points[t - 1].x, points[t - 1].y); ctx.lineTo(points[t].x, points[t].y); ctx.stroke(); // 增加“t”以獲得下一個航路點 t++; } })() ```