canvas學習筆記-繪製簡單路徑

3.1 線段（直線路徑）

繪製線段通常步驟:

moveTo(x,y) 移動畫筆到指定的座標點(x,y)
lineTo(x,y) 使用直線鏈接當前端點和指定的座標點(x,y)
stroke() 根據當前的畫線樣式，繪製當前或已經存在的路徑

---

3.2 矩形路徑

繪製矩形路徑通常步驟:

rect(x, y, width, height) 矩形路徑，座標點(x,y)，width height寬高
stroke()或 fill 根據當前的樣式，繪製或填充路徑
也可以使用前文提到的 strokeRect或 fillRect, 或者是經過 lineTo拼接成矩形

---

3.3 圓弧路徑

先看下繪製圓弧的api:

• ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

x, y 圓弧中心， radius 圓弧半徑, startAngle 起始點, endAngle 圓弧終點, anticlockwise 默認爲順時針, true逆時針
CSS中作旋轉用到都是角度（deg），可是arc函數中表示角的單位是弧度，不是角度。角度與弧度的js表達式: 弧度 = (Math.PI/180) * 角度(deg)。
這裏弧度是以x軸正方向爲基準、默認順時針旋轉的角度來計算

圖示：

(圖片來自大漠)

ctx.beginPath();
ctx.arc(200, 100, 100, 0, Math.PI / 2, false);
ctx.closePath();
ctx.stroke();
ctx.fill();

arc示例