繪制二次貝塞爾曲線
ctx.quadraticCurveTo(x1, y1, x, y);
從上一點開始繪制一條二次曲線课舍，到(x, y)為止，并且以(x1, y1)作為控制點
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.lineWidth = 4;
// 起始點
ctx.moveTo(100, 400);//（從上一點）
ctx.quadraticCurveTo(200, 500, 300, 400);
ctx.stroke();
image.png
可以點擊這使用網(wǎng)頁版：二次貝塞爾曲線調(diào)試工具
繪制三次貝塞爾曲線
ctx.bezierCurveTo(x1, y1, x2, y2, x, y)
從上一個點開始繪制一條曲線盒卸，到(x, y)為止，并且以(x1, y1)和(x2, y2)為控制點
ctx.beginPath();
// 線的顏色贯涎， 線的粗細
ctx.strokeStyle = 'blue';
ctx.lineWidth = 4;
// 起始點
ctx.moveTo(100, 300);//（從上一點）
ctx.bezierCurveTo(150, 250, 250, 350, 300, 300);
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.font = '14px bold';
ctx.textAlign = 'center';
// 起始點
ctx.moveTo(100, 300);
ctx.fillText('(100, 300)', 100, 330);
ctx.arc(100, 300, 4, 0, 2 * Math.PI);
// 控制點1
ctx.moveTo(150, 250);
ctx.fillText('(150, 250)', 150, 230);
ctx.arc(150, 250, 4, 0, 2 * Math.PI);
// 控制點2
ctx.moveTo(250, 350);
ctx.fillText('(250, 350)', 250, 380);
ctx.arc(250, 350, 4, 0, 2 * Math.PI);
// 結(jié)束點
ctx.moveTo(300, 300);
ctx.fillText('(300, 300)', 300, 330);
ctx.arc(300, 300, 4, 0, 2 * Math.PI);
ctx.fill();
image.png
可以點擊這使用網(wǎng)頁版：三次貝塞爾曲線調(diào)試工具
這一章僅僅是簡單的了解一下貝塞爾曲線的語法
如果你想更深入理解貝塞爾曲線杖挣，可以點擊這里
