通过前面教程的学习，我们可以在Canvas中轻易绘制路径（线段）。这仅仅是Canvas中的一小部分，今天我们来看看在Canvas中怎么绘制矩形。

绘制矩形的方法

在Canvas中提供了绘制矩形的API：

• fillRect(x, y, width, height)：绘制一个填充的矩形
• strokeRect(x, y, width, height)：绘制一个矩形的边框
• clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明

除此之外还可以通过Canvas中CanvasRenderingContext2D.rect()路径方法创建矩形。这个方法需要配合CanvasRenderingContext2D.fill()绘制一个填充的矩形，CanvasRenderingContext2D.stroke()绘制一个填充的矩形。另外，还可以直接使用Canvas的绘制路径的方法来绘制矩形。那我们来先看看怎么使用路径绘制矩形。

路径绘制矩形

记得在学习绘制线段的时候，我们知道moveTo()和lineTo()可以绘制线段，如此一来，四条线就能拼出一个矩形，然后通过fill()和stroke()绘制出填充和边框矩形。

function drawScreen () {
    ctx.strokeStyle = '#00';
    ctx.fillStyle = '#9f9'
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(30,30);
    ctx.lineTo(230,30);
    ctx.lineTo(230,200);
    ctx.lineTo(30,200);
    ctx.lineTo(30,30);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(300,30);
    ctx.lineTo(500,30);
    ctx.lineTo(500,200);
    ctx.lineTo(300,200);
    ctx.lineTo(300,30);
    ctx.fill();

}

在Canvas中我们有一个closePath()的方法，在绘制矩形的时候，借助这个方法，我们通过绘制三条线段，就能和起始点闭合，也就绘制出相应的矩形。基于上面的示例，在stroke()和fill()前面添加closePath()即可：

function drawScreen () {
    ctx.strokeStyle = '#00';
    ctx.fillStyle = '#9f9'
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(30,30);
    ctx.lineTo(230,30);
    ctx.lineTo(230,200);
    ctx.lineTo(30,200);
    ctx.closePath();
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(300,30);
    ctx.lineTo(500,30);
    ctx.lineTo(500,200);
    ctx.lineTo(300,200);
    ctx.closePath();
    ctx.fill();

}