HTML Canvas 圓形

實例

Your browser does not support the HTML5 canvas tag. 
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

親自試一試

畫圓

要在畫布上繪制圓形，請使用以下方法：

  • beginPath() - 開始路徑
  • arc(x,y,r,start,end) - 定義圓
  • stroke() - 繪制

arc(x,y,r,start,end) - 創建弧（曲線）。

要創建圓，請將起始角度設置為 0，結束角度設置為 2 * Math.PI。

x 和 y 參數定義圓心的坐標。

r 參數定義圓的半徑。

另請參閱：

CodeW3C.com 的完整 Canvas 參考手冊