其實在Canvas 中的基本圖形就只有兩個 ： 直線圖形 和 曲線圖形 。

圓形也算是在曲線圖形中，一般畫圓的時候必須配套使用 beginPath() 和 closePath()，圓形屬於一個“閉合圖形”，先在畫布上開闢一個路徑，畫完以後結束路徑。

語法：

ctx.beginPath();
ctx.arc(x,y,半徑,開始角度,結束角度, 是否逆時針繪製); 預設為false

ctx.closePath();
ctx.stroke();

自己畫的一個簡單的解說圖：(｀・ω・´)

程式碼：

    let cans=document.getElementById
 
("fourthlyC");
    let ctx=cans.getContext("2d");

    ctx.beginPath();    //開始新路徑
    ctx.arc(150,100,70,0,180*Math.PI/180,true);  //以畫布X軸 座標150 Y軸座標300點為圓心 畫一個半徑長70，度數為180，的圓，逆時針旋轉
    ctx.closePath();   //結束這次繪圖路徑，不影響其他
    ctx.stroke();       //以描邊方式顯示這個圓

    //角度的單位建議寫  *Math.PI/180  這樣設定了多少度一目瞭然

    ctx.beginPath();
 

    ctx.arc(550,100,70,0,180*Math.PI/180);  
                    //最後一個值不寫預設是不旋轉的
    ctx.closePath();
    ctx.strokeStyle="#1AC6FF";          //定位圓邊的顏色
    ctx.stroke();

效果圖：

也可以同時繪製兩個圓形疊加在一起：

 //給圓 填充上顏色
    ctx.beginPath();
    ctx.arc(550,400,150,0,360*Math.PI/180);
    ctx.closePath();
    ctx.fillStyle="#f00"
 
;
    ctx.fill();

    //第二個圓
    ctx.beginPath();
    ctx.arc(550,400,100,0,360*Math.PI/180);
    ctx.closePath();
    ctx.fillStyle="#FFFC43";
    ctx.fill();

效果圖：

然後再來說說另一個：
畫弧線

畫弧線與畫圓 最大區別就是不使用closePath() 這個方法，弧線不屬於“閉合圖形” 所以並不需要封閉它；
closePath()主要是用來連線起點和終點

語法：

ctx.beginPath();
ctx.arc(x,y,半徑,開始角度,結束角度, 是否逆時針繪製);
ctx.stroke();

    ctx.beginPath();
    ctx.arc(150,400,100,0,270*Math.PI/180);
    ctx.strokeStyle="#391C9B";
    ctx.stroke();

效果圖：