Canvas三次贝塞尔曲线-15

js部分：

    window.onload = function (params) {
            // 得到绘制源
            var c = document.getElementById('canvas');
            // 创建画布，建立二维视角
            var ctx = c.getContext('2d');
            /* 右耳朵 */
            // 创建渐变色(x,y,x1,y1)坐标线条衍变
            var grd = ctx.createLinearGradient(50,60,100,0);
            grd.addColorStop(0,'red');
            grd.addColorStop(1,'blue');

            ctx.fillStyle = grd;
            ctx.beginPath();
            ctx.moveTo(200,20);
            //三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
            // ctx.bezierCurveTo(200,80,180,235,20,20);
            ctx.bezierCurveTo(20,80,100,235,200,20);
            ctx.stroke();
            ctx.fill();

            /* 左耳朵 */
            var grd = ctx.createLinearGradient(100,60,0,0);
            grd.addColorStop(0,'red');
            grd.addColorStop(1,'blue');
            ctx.fillStyle = grd;
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.bezierCurveTo(120,100,30,200,0,0);
            ctx.stroke();
            ctx.fill();
        }

 

来源：CSDN

作者：颜墨白

链接：https://blog.csdn.net/qq_38948398/article/details/103953020