canvas學習筆記-繪製矩形及路徑(一)

2. 矩形

• canvas只支援一種原生的圖形繪製：矩形。
• 所有其他的圖形的繪製都至少需要生成一條路徑。

繪製矩形三種方法：

// 繪製一個填充的矩形
fillRect(x, y, width, height);
// 繪製一個矩形的邊框
strokeRect(x, y, width, height);
// 清除指定矩形區域，讓清除部分完全透明。
clearRect(x, y, width, height);

矩形示例

---

3. 路徑

圖形的基本元素是路徑。路徑是點的集合。
使用路徑繪製圖形一般步驟如下：

• 1.beginPath()新建一條路徑（有時需要建立路徑起始點）
• 2.lineTo,arc,rect等繪製路徑
• 3.closePath閉合路徑（根據實際需求）
• 4.stroke fill繪製或者填充（路徑沒有此步驟，圖形不會顯示）

路徑繪製常見方法

// 直線路徑
lineTo(x, y)

// 矩形路徑
rect(x, y, width, height)

// 圓弧路徑
arc(x, y, radius, startAngle, endAngle, anticlockwise)

// 橢圓路徑(chrome37+)
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)

// 二次貝塞爾曲線
quadraticCurveTo(cp1x, cp1y, x, y)

// 三次貝塞爾曲線
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

// Path2D(chrome36+, addPath chrome68+)
new Path2D(path);