共计 3362 个字符，预计需要花费 9 分钟才能阅读完成。
最近有读者加我微信征询这个问题：
其中的成果是一个折线门路动画成果，如下图所示：
要实现以上门路动画，个别能够应用 svg 的动画性能。或者应用 canvas 绘制，联合门路数学计算来实现。
如果用 canvas 来绘制，其中的难点在于：
- 须要计算子门路，这块计算比较复杂。（当然是能够实现的）
- 突变的计算，从图中能够看出，动画的子门路是有突变成果的，如果要分段计算突变也很简单。
本文介绍一种思路，应用 clip 办法，动静挪动 clip 的区域，来达到近似的成果。具体怎么做。
绘制灰色门路
绘制门路的代码比较简单，此处就不具体阐明，上面代码就模仿了了一个折线门路的绘制：
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(230,200);
ctx.lineTo(250,50);
ctx.lineTo(270,180);
ctx.lineTo(300,60);
ctx.lineTo(330,160);
ctx.lineTo(350,60);
ctx.lineTo(380,100);
ctx.lineTo(480,100);
ctx.strokeStyle = "gray";
ctx.lineJoin = "round";
ctx.stroke(); 成果如下:
绘制亮色门路
绘制亮色门路的代码和绘制灰色门路的代码一样，只是款式是一个亮的色彩：
ctx.save();
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(230,200);
ctx.lineTo(250,50);
ctx.lineTo(270,180);
ctx.lineTo(300,60);
ctx.lineTo(330,160);
ctx.lineTo(350,60);
ctx.lineTo(380,100);
ctx.lineTo(480,100);
ctx.strokeStyle = "gray";
ctx.lineJoin = "round";
ctx.stroke(); 成果如下：
clip 管制亮色门路的绘制区域
canvas 的 clip 办法能够管制绘制的区域，通过该办法，能够管制智绘制门路的一部分：
ctx.beginPath();
ctx.rect(offset,0,100,500); // offset 等于 0
ctx.clip();
...
ctx.stroke(); clip 之后，亮色门路就只会绘制一部分, 如下图：
动画成果
通过一直变动 offset 的值，就能够小道亮色门路挪动的成果，代码如下：
offset += 2;
if(offset > 600){offset = 100;}
requestAnimationFrame(animate);最终成果如下：
突变
咱们晓得突变没法沿着任意门路，如果计算折线，分段计算突变又很麻烦。其实在本案例中，尽管是折线，然而整体的静止方向总是从左往右的，所以能够用从左往右的突变来近似模仿既能够：
function createGradient(ctx,x0,y0,x1,y1){var grd = ctx.createLinearGradient(x0,y0,x1,y1);
grd.addColorStop(0,'#129ab3');
grd.addColorStop(1,"#19b5fe");
return grd;
}
ctx.strokeStyle = createGradient(ctx,offset,0,offset + 100,0);最终成果如下所示：
全副代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>line animate</title>
<style>
canvas {border: 1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var ctx = document.getElementById('canvas').getContext('2d');
var w = canvas.width,
h = canvas.height;
var x = w / 2,y = h / 2;
function setupCanvas(canvas) {
let width = canvas.width,
height = canvas.height,
dpr = window.devicePixelRatio || 1.0;
if (dpr != 1.0) {
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.height = height * dpr;
canvas.width = width * dpr;
ctx.scale(dpr, dpr);
}
}
setupCanvas(canvas);
var offset = 100;
function createGradient(ctx,x0,y0,x1,y1){var grd = ctx.createLinearGradient(x0,y0,x1,y1);
grd.addColorStop(0,'#9a12b3');
grd.addColorStop(1,"#19b5fe");
return grd;
}
function animate(){
ctx.fillStyle = "black";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.lineWidth = 3;
ctx.save();
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(230,200);
ctx.lineTo(250,50);
ctx.lineTo(270,180);
ctx.lineTo(300,60);
ctx.lineTo(330,160);
ctx.lineTo(350,60);
ctx.lineTo(380,100);
ctx.lineTo(480,100);
ctx.strokeStyle = "gray";
ctx.lineJoin = "round";
ctx.stroke();
ctx.beginPath();
ctx.rect(offset,0,150,500);
ctx.clip();
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(230,200);
ctx.lineTo(250,50);
ctx.lineTo(270,180);
ctx.lineTo(300,60);
ctx.lineTo(330,160);
ctx.lineTo(350,60);
ctx.lineTo(380,100);
ctx.lineTo(480,100);
ctx.lineWidth = 4;
ctx.strokeStyle = createGradient(ctx,offset,0,offset + 150,0);
ctx.lineCap = "round";
// ctx.globalCompositeOperation = 'lighter';
ctx.lineJoin = "round";
ctx.stroke();
ctx.restore();
offset += 2;
if(offset > 600){offset = 100;}
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>总结
其实整体思路是用了近似，而不是严格的管制门路长度和突变成果，这样能够更不便实现以上性能。其实人眼有时候是分辨不进去一些细节，可视化，有的时候只有可能达到让人“感觉”是那么回事，其实目标也就达到了。
以上计划只能实用于，折线门路的整体方向是统一的。如果整体方向是先程度向右，而后在垂直向下，或者甚至呈现往回拐的状况，就不适宜了。
关注公众号“ITMan 彪叔”能够及时收到更多有价值的文章。另外如果对可视化感兴趣，能够和我交换，微信 541002349.
正文完
