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

绘制气泡

• 二次贝塞尔曲线
• canvas quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
• quadraticCurveTo(cpx，cpy，x，y) 贝塞尔控制点的 x 坐标，贝塞尔控制点的 y 坐标，结束点的 x 坐标，结束点的 y 坐标。
• 提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

  

  （图片参考：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();
}
           

绘制圆角矩形

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();
}
           

绘制立体桃心

• 三次贝塞尔曲线
• canvas bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。
• context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 第一个贝塞尔控制点的 x 坐标，第一个贝塞尔控制点的 y 坐标，第二个贝塞尔控制点的 x 坐标， 第二个贝塞尔控制点的 y 坐标， 结束点的 x 坐标， 结束点的 y 坐标。
• 提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

  

  （图片参考：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();//把颜色填充进去
}