## 第三課時：矩形 以下方法用來繪制矩形。 * `CanvasRenderingContext2D.rect()`：繪制矩形路徑。 * `CanvasRenderingContext2D.fillRect()`：填充一個矩形。 * `CanvasRenderingContext2D.strokeRect()`：繪制矩形邊框。 * `CanvasRenderingContext2D.clearRect()`：指定矩形區域的像素都變成透明。 上面四個方法的格式都一樣，都接受四個參數，分別是矩形左上角的橫坐標和縱坐標、矩形的寬和高。 `CanvasRenderingContext2D.rect()`方法用于繪制矩形路徑。 ``` var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); ``` 上面代碼繪制一個正方形，左上角坐標為`(10, 10)`，寬和高都為 100。 `CanvasRenderingContext2D.fillRect()`用來向一個矩形區域填充顏色。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100); ~~~ 上面代碼繪制一個綠色的正方形，左上角坐標為`(10, 10)`，寬和高都為 100。 `CanvasRenderingContext2D.strokeRect()`用來繪制一個矩形區域的邊框。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.strokeStyle = 'green'; ctx.strokeRect(10, 10, 100, 100); ~~~ 上面代碼繪制一個綠色的空心正方形，左上角坐標為`(10, 10)`，寬和高都為 100。 `CanvasRenderingContext2D.clearRect()`用于擦除指定矩形區域的像素顏色，等同于把早先的繪制效果都去除。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillRect(10, 10, 100, 100); ctx.clearRect(15, 15, 90, 90); ~~~ 上面代碼先繪制一個 100 x 100 的正方形，然后在它的內部擦除 90 x 90 的區域，等同于形成了一個 5 像素寬度的邊框。