canvas实现飞线流动效果

这篇文章主要介绍如果用canvas实现固定坐标数组的飞线动画（折线），或者可以说是电流效果吧。

之前在网上有看到过流星托尾的效果，那种效果的主要方式是通过不断添加“蒙板”层的方式逐渐淡化前几秒的位置，而绘制的线其实就是一个小球，一直在移动。看起来是线，代码层面上其实只画了一个点。主要的代码为

ctx.fillStyle = 'rgba(0,0,0,0.1)';//这里颜色要与背景图的颜色一样，但是透明度要小
ctx.rect(0,0,800,600);//整个绘制区域的大小

但是，该方法有一个很严重的bug，托尾的轨迹无法完全清楚，虽然一开始颜色较淡，但是久而久之就会越来越深。具体的实现代码这里不赘述，可自行百度。

而今天要讲述的方法，是不断绘制每一帧的“线”。没错，是正儿八经的线。由于会涉及到拐角转弯，所以会有一定的计算和比较，这是难点。托尾的效果自然可以通过对线设置渐变颜色来实现。

1、参数介绍

constructor(color, length, width, speed, route, step = 0) {
    this.startx = route[0].x;//设置起始点坐标
    this.starty = route[0].y;
    this.route = route;//轨迹点，数组格式
    this.speed = speed;//速度
    this.width = width;//线的宽度
    this.color = color;//飞线的颜色
    this.length &#