## 第三课时：矩形 以下方法用来绘制矩形。 * `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 像素宽度的边框。