用canvas绘制2D飞线的方法

c.动画步长（step），范围也在[0,1+length]之间，用于表示飞线飞行进度，为什么右区间是 1+length呢？当然是为了让飞线能够完全消失啦。否则第一段飞线还没飞完，第二段就要出来了。

    下面是完整的飞线动画绘制方法：

this.timer=null;	//动画计时器
//封装绘制飞线的二次贝塞尔曲线
const drawFlyLine = (start, end, center)=>{
	const ctx = this.ctx;		//this.ctx是canvas的上下文
  ctx.beginPath();
  ctx.moveTo( start.x, start.y );
  ctx.quadraticCurveTo( center.x, center.y, end.x, end.y );
  ctx.stroke();
  ctx.closePath();
}
draw=()=>{
    const ctx = this.ctx;
    let length = 0.4;
    let step = 0;     //动画步长
    let width = this.canvas.width;
    let height = this.canvas.height;
  	//粗略获取贝塞尔曲线长度，用于设置dashoffset
    let curvesLength = this.flyLineData.map(d=>{
        return calcQuadraticLength(d.start, d.center, d.end);
    });
    const animation = ()=>{
        ctx.clearRect(0,0,width, height);
        this.flyLineData.forEach((d,i)=>{
            const { start, center, end } = d;
            const lineLength = curvesLength[i];   
            ctx.save();
            // 绘制底线
            if(showBase){
                ctx.lineWidth=2;
                ctx.strokeStyle='red';
                this.drawFlyLine(start,end,center);
            }
            //绘制飞线
            ctx.lineWidth = 3;
            ctx.setLineDash([length*lineLength, lineLength]);
            ctx.lineDashOffset = -(1+step)*lineLength;
            //每一帧计算飞线的头和尾坐标，根据头尾坐标来决定渐变方向
            const p1 = quadraticBezier(start, end, center, Math.min(1,step));
            const p2 = quadraticBezier(start, end, center, Math.max(0,step-length));
            const gradient = ctx.createLinearGradient(p1.x,p1.y,p2.x,p2.y);
            //linear.stops是一个对象数组，对象结构如下：{offset:100,color:"#f0f"}
            linear.stops.forEach(v=>{
                gradient.addColorStop(v.offset/100,v.color);
            });
            ctx.strokeStyle = gradient;
          	this.drawFlyLine(start,end,center);
            ctx.restore();
        });
        //step每一帧增加0.01/3，并且利用取余数的方法，在达到1+length时进行重置
        step=(((step+0.01/3)*100)%(100*(1+length)))/100;
        this.timer = requestAnimationFrame(animation);
    }
    //在头部图片资源加载完毕后再执行动画
    animation();
}
draw();

        至此，一个简单的二次贝塞尔飞线就完成了。