Canvas繪製曲線

圓弧

圓弧使用arc方法繪製，畫圓的時候畫的弧度是從0到2π，而想要畫圓弧就調整參數只畫出部分圓即可。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.arc(100, 100, 100, 0, Math.PI / 2);
ctx.stroke();

注意該方法還有第6個參數，即是否以逆時針方向畫圓。默認爲false。

若設爲true：

別忘了還可以使用fill方法來填充一個圓，它會自動形成一個封閉區域並填充。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.arc(100, 100, 100, 0, Math.PI / 2);
ctx.fill();

貝塞爾曲線

二次貝塞爾曲線需要三個控制點，代碼如下：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(200, 200);
ctx.quadraticCurveTo(355, 213, 401, 357);
ctx.stroke();