canvas绘制飞线效果

ctx.quadraticCurveTo(cpx, cpy, x, y);

  function createGradient(ctx,p0,p1){
           var grd = ctx.createLinearGradient(p0.x,p0.y,p1.x,p1.y);
           grd.addColorStop(0,'rgba(255,0,255,0)');
           grd.addColorStop(1,'rgba(255,0,255,1)');
           return grd;
   }
  ctx.beginPath();
  ctx.moveTo(P0.x,P0.y);
  ctx.quadraticCurveTo(Q01.x,Q01.y,B1.x,B1.y);
  ctx.lineCap = 'round';
  ctx.lineWidth =3;
  ctx.strokeStyle = createGradient(ctx,P0,P2);
  ctx.shadowColor = 'rgba(255,0,255,1)';
  ctx.shadowBlur = 5;
  ctx.stroke();

        let percent = 0.0;       
        function render(){
            ctx.save();
            //按百分比绘制
            ctx.restore();
            percent += 0.005;
            if(percent > 1){
                percent = 0.;
            }
            requestAnimationFrame(render);
        }

 // 参考https://xiaozhuanlan.com/topic/9506147283#section0t

        let P0 = startPoint, P1 = controlPoint,P2 = endPoint;

        let Q01 = interpolation(P0,P1,percent),

            Q11 = interpolation(P1,P2,percent),

            B1 = interpolation(Q01,Q11,percent);

        var Q = {

            x: P0.x * (1 - t) + P1.x * (t),

            y: P0.y * (1 - t) + P1.y * (t),

        };

        return Q;

    } 

#### 二次贝塞尔曲线
我们知道二次贝塞尔曲线有三个点P0、P1、P2。二次贝塞尔曲线的表达方程如下：
B(t) = (1-t)<sup>2</sup> * P0 + 2t(1-t) * P1 + t<sup>2</sup> * P2
其中： $t \in $[0,1]

借助上面一次贝塞尔曲线的计算方法，可以通过以下步骤来确定二次贝塞尔曲线的B(t)点:
* 选定 $t \in $[0,1]
* 通过插值运算法则，在P0和P1所组成的线段上，计算出P0和P1点之间的插值点Q0,其中插值的比例值是t。根据插值规则有：length( P0, Q0 ) = length( P0, P1 ) * t
* 通过插值运算法则，在P1和P2所组成的线段上，计算出P1和P2点之间的插值点Q1,其中插值的比例是t。
* 通过插值运算法则，在Q1和Q2所组成的线段上，计算出P1和P2点之间的插值点B,其中插值的比例是t。
上述过程中计算出来的点B就是在曲线上面点。上述过程如下图所示：

![二次贝塞尔曲线的计算方法过程](https://upload-images.jianshu.io/upload_images/6271001-773f3bc73bb803f7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

从图中可以得出结论：
* 直线(Q0,Q1)和曲线相切于B点。

另外还有隐藏的结论：
* 曲线(P0,B)也是贝塞尔曲线，P0是曲线的起始点，B是曲线的终止点，而Q0是控制点
* 曲线(B,P2)也是贝塞尔曲线，B是曲线的起始点，P2是曲线的终止点，而Q1是控制点

上面两个结论会很有用，有了这个两个结论，前面“迭代（分片）”绘制部分贝塞尔的方法，可以用更加简单的方法替代，这在稍后详细说明。

如果将t的值从0过渡到1，不断计算点B，这些点的集合就可以组成一条二次贝塞尔曲线。下面图形动画复现了这个效果：
![二次贝塞尔曲线的计算方法过程](https://upload-images.jianshu.io/upload_images/6271001-f2133738c2ea60be.gif?imageMogr2/auto-orient/strip)





通过上面的方式，就可以绘制流动的飞线效果了，如下图所示：

![流动效果](https://upload-images.jianshu.io/upload_images/6271001-370710e91634ec07.gif?imageMogr2/auto-orient/strip)


## 加上阴影
默认线条的样式并不是很好看，如果加上阴影，可以让效果更加丰满。  加上阴影也很简单，代码如下：