***** ``` (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++; } })() ```