canvas二次、三次贝赛尔曲线绘制气泡&圆角矩形&立体桃心

今天药忘吃喽~ 2023-07-11 15:16 3阅读 0赞

### 绘制气泡 ###

*  二次贝塞尔曲线
 *  canvas quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
 *  quadraticCurveTo(cpx，cpy，x，y) 贝塞尔控制点的 x 坐标，贝塞尔控制点的 y 坐标，结束点的 x 坐标，结束点的 y 坐标。
 *  提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。  
    ![在这里插入图片描述][20200306132442391.gif]  
    （图片参考：[HTML5 canvas quadraticCurveTo() 方法][HTML5 canvas quadraticCurveTo_]）

// 二次贝塞尔曲线绘制气泡
    var canvas=document.querySelector("canvas");
    canvas.width=800;
    canvas.height=600;
    var ctx=canvas.getContext("2d");
    draw();
    
    function draw(){ 
        ctx.clearRect(0,0,800,600);
        ctx.lineCap="round";
        ctx.lineWidth=5;
        ctx.strokeStyle="teal";
    
        //画个气泡
        ctx.beginPath();
        ctx.moveTo(75,25);
        ctx.quadraticCurveTo(25,25,25,62.5);
        ctx.quadraticCurveTo(25,100,50,100);
        ctx.quadraticCurveTo(50,120,30,125);
        ctx.quadraticCurveTo(60,120,65,100);
        ctx.quadraticCurveTo(125,100,125,62.5);
        ctx.quadraticCurveTo(125,25,75,25);
        ctx.stroke();
    }

![在这里插入图片描述][20200306133220110.png]

### 绘制圆角矩形 ###

var canvas=document.querySelector("canvas");
    canvas.width=800;
    canvas.height=600;
    var ctx=canvas.getContext("2d");
    draw();
    
    function draw(){ 
        ctx.clearRect(0,0,800,600);
        ctx.lineCap="round";
        ctx.lineWidth=5;
        ctx.strokeStyle="teal";
        ctx.beginPath();
    
        // 画个圆角矩形
        var x=100,y=100;
        var width=200,height=100;
        var radius=50;//圆角半径宽度
        ctx.beginPath();
        ctx.moveTo(x,y+radius);
        ctx.lineTo(x,y+height-radius);
        ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
        ctx.lineTo(x+width-radius,y+height);
        ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
        ctx.lineTo(x+width,y+radius);
        ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
        ctx.lineTo(x+radius,y);
        ctx.quadraticCurveTo(x,y,x,y+radius);
        ctx.stroke();
    }

![在这里插入图片描述][20200306135211967.png]

### 绘制立体桃心 ###

*  三次贝塞尔曲线
 *  canvas bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。
 *  context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 第一个贝塞尔控制点的 x 坐标，第一个贝塞尔控制点的 y 坐标，第二个贝塞尔控制点的 x 坐标， 第二个贝塞尔控制点的 y 坐标， 结束点的 x 坐标， 结束点的 y 坐标。
 *  提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。  
    ![在这里插入图片描述][20200306132448182.gif]  
    （图片参考：[HTML5 canvas quadraticCurveTo() 方法][HTML5 canvas quadraticCurveTo_]）

var canvas=document.querySelector("canvas");
    canvas.width=800;
    canvas.height=600;
    var ctx=canvas.getContext("2d");
    draw();
    
    function draw(){ 
        ctx.clearRect(0,0,800,600);
        ctx.lineCap="round";
        ctx.lineWidth=5;
        ctx.strokeStyle="rgba(255,0,0,0)";
        // 加点阴影
        ctx.shadowOffsetX=3;
        ctx.shadowOffsetY=3;
        ctx.shadowBlur=7;//模糊度
        ctx.shadowColor="#999";
        // 再带点儿高光-径向渐变
        var highlight=ctx.createRadialGradient(105,58,5,30,30,180);
        highlight.addColorStop(0,'#ffffff');
        highlight.addColorStop(0.3,'tomato');
        ctx.fillStyle=highlight;//填充桃心颜色西红柿色
        ctx.beginPath();
    
        // 桃心
        ctx.moveTo(75,40);
        ctx.bezierCurveTo(75,37,70,25,50,25);
        ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
        ctx.bezierCurveTo(20,80,40,102,75,120);
        ctx.bezierCurveTo(110,102,130,80,130,62.5);
        ctx.bezierCurveTo(130,62.5,130,25,100,25);
        ctx.bezierCurveTo(85,25,75,37,75,40);
        ctx.stroke();
        ctx.fill();//把颜色填充进去
    }

![在这里插入图片描述][20200306141418472.png]

[20200306132442391.gif]: https://img-blog.csdnimg.cn/20200306132442391.gif
[HTML5 canvas quadraticCurveTo_]: https://www.w3school.com.cn/tags/canvas_quadraticcurveto.asp
[20200306133220110.png]: https://img-blog.csdnimg.cn/20200306133220110.png
[20200306135211967.png]: https://img-blog.csdnimg.cn/20200306135211967.png
[20200306132448182.gif]: https://img-blog.csdnimg.cn/20200306132448182.gif
[20200306141418472.png]: https://img-blog.csdnimg.cn/20200306141418472.png