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