前面給大家講解了怎麼繪製矩形和線條，接下來將講解下如何在 canvas 畫布上 繪製圓弧和圓形。
相對矩形來說，繪製圓弧則更爲複雜。繪製圓弧需要確定圓心的座標，圓弧的角度以及繪製圓弧的繪製方法等等。
context.arc()
在 Canvas 中我們可以使用 context.arc() 的方法來創建圓弧路徑。簡單來說，在 Canvas 中，創建一條圓弧路徑是從與圓心(x, y)距離爲一個半徑且角度爲開始角度的位置開始，最後停在離圓心(x, y)距離爲一個半徑且角度爲結束角度的位置上。
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
參數說明：
x: 圓的中心的 x 座標y: 圓的中心的 y 座標radius: 圓的半徑startAngle: 圓弧的開始角度endAngle: 圓弧的結束角度anticlockwise: 可選的參數，規定應該逆時針還是順時針繪圖，默認值爲 false
弧度表示角度
這裏需要注意的是，在 Canvas 中表示圓弧的開始角度和結束角度都是以弧度來表示的，而不是使用角度來表示。
舉個例子: 360度使用弧度來表示則是 2π (pi 的兩倍) 弧度。
我們可以通過下面的公式進行換算。
var degree = 1; // 表示 1°
var radians = degree * (Math.PI / 180); // 0.0175弧度
繪製圓弧路徑
接下來讓我們嘗試繪製一個圓弧，如下圖：
具體代碼如下：
// 開始創建新路徑
context.beginPath();
// 創建一個半圓圓弧
context.arc(250, 250, 200, 0, Math.PI, false);
// 調用 stroke 繪製該路徑
context.stroke();
繪製部分圓
接下來讓我們嘗試繪製一個部分圓形填充圖形，如下圖：
// 開始創建新路徑
context.beginPath();
// 創建一個圓弧
context.arc(250, 250, 200, 0, 0.75 * Math.PI, false);
// 填充該圓弧
context.fill();
繪製圓形
圓形實際上是由圓弧組成（首尾相連的圓弧便是圓形）,如果我們需要繪製下面的圓形：
具體代碼如下：
// 開始創建新路徑
context.beginPath();
// 設置開始角度爲0，結束角度爲 2π 弧度
context.arc(250, 250, 200, 0, 2 * Math.PI, false);
// 使用 fill 自動閉合圓弧路徑，然後填充圓弧區域
context.fill();
繪製圓角矩形
我們不僅可以使用 context.arc() 來繪製圓弧和圓形，我們還可以來繪製圓角矩形上的圓角。如下圖爲我們需要繪製一個圓角矩形：
var x = 120; // 圓角矩形左上角橫座標
var y = 120; // 圓角矩形左上角縱座標
var width = 250; // 圓角矩形的寬度
var height = 250; // 圓角矩形的高度
var radius = 50; // 圓角的半徑
// 開始創建新路徑
context.beginPath();
// 繪製左上角圓角
context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
// 繪製頂邊路徑
context.lineTo(width - radius + x, y);
// 繪製右上角圓角
context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
// 繪製右邊路徑
context.lineTo(width + x, height + y - radius);
// 繪製右下角圓角
context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
// 繪製底邊路徑
context.lineTo(radius + x, height +y);
// 繪製左下角圓角
context.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
// 閉合路徑 也可使用 context.lineTo(x, y + radius);
context.closePath();
// 設置繪製的顏色
context.strokeStyle = '#188eee';
context.stroke();