html5 canvas实现透明渐变曲线

canvas 透明渐变曲线
canvas 画布
首先html

<canvas id="canvas" width="400" height="300"></canvas>

用canvas来实现

 window.onload=function(){
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        this.width = canvas.width;
        this.height = canvas.height;
        ctx.beginPath();
        ctx.moveTo(90, 50);
        ctx.quadraticCurveTo(190, 0, 300, 10);
        ctx.lineWidth=15;
        var gnt1 = ctx.createLinearGradient(0,0,400,300);
        gnt1.addColorStop(0.5,'rgba(3,131,254, 0)');
        gnt1.addColorStop(0,'rgba(3,131,254, 1)');
        gnt1.addColorStop(1,'rgba(3,131,254, 1)');
        ctx.strokeStyle = gnt1;
        ctx.lineCap='round';
        ctx.stroke();
        ctx.closePath();


    }

谷歌浏览器效果

canvas.getContext(“2d”);2b代表二维绘图，
moveTo(x,y) x、y坐标
quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
createLinearGradient() 线性渐变

lineWidth 曲线宽度
strokeStyle 曲线颜色
addColorStop() 渐变中颜色跟透明度

lineCap 属性设置或返回线条末端线帽的样式