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();//把顔色填充進去
}