通过前面教程的学习，我们可以在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(); }

rect()绘制矩形

rect() 也是Canvas中路径的一个方法，前面说过了，也需要配合 fill() 和 stroke() 。 rect() 具有四个参数：

rect(x, y, width, height)

其中 x 和 y 是矩形左上角的坐标点， width 是矩形的宽度， height 是矩形的高度。接下来，看如何使用 rect() 绘制矩形：

function drawScreen () { ctx.strokeStyle = '#00'; ctx.fillStyle = '#9f9' ctx.lineWidth = 4; ctx.beginPath(); ctx.rect(30,30,200,200); ctx.stroke(); ctx.beginPath(); ctx.rect(300,30,200,200); ctx.fill(); }

fillRect()绘制填充矩形

前面两种方法是通过Canvas的路径方法绘制填充和边框矩形。那么在Canvas中可以直接通过 fillRect() 绘制一个矩形：

fillRect(x,y,width,height)

和 rect() 一样， x 和 y 是矩形左上角的坐标点， width 是矩形宽度， height 是矩形高度：

function drawScreen () { ctx.fillStyle = '#9f9' ctx.fillRect(30,30,200,200); }

strokeRect()绘制边框矩形

strokeRect() 和 fillRect() 方法类似，只不过不同的是， strokeRect() 绘制的是边框矩形：

function drawScreen () { ctx.lineWidth = 4; ctx.strokeStyle = '#9f9' ctx.strokeRect(30,30,200,200); }

同时绘制有边框和填充色的矩形

前面我们看到的都是单独绘制边框或填充的矩形。那么将这两种结合在一起，我们就可以很容易的绘制出同时带有边框和填充色的矩形：

function drawScreen () { ctx.lineWidth = 4; ctx.fillStyle = "orange"; ctx.strokeStyle = '#9f9' // Methods #1 ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(110,10); ctx.lineTo(110,110); ctx.lineTo(10,110); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(12,12); ctx.lineTo(108,12); ctx.lineTo(108,108); ctx.lineTo(12,108); ctx.closePath(); ctx.fill(); // Methods #2 ctx.beginPath(); ctx.rect(120,10,100,100); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.rect(122,12,96,96); ctx.fill(); // Methods #3 ctx.strokeRect(240,10,100,100); ctx.fillRect(242,12,96,96); }

绘制折角或圆角矩形

在学习Canvas线型一节中，知道在Canvas中 lineJoin 可以改变线段连接端点的形状。如果我们要绘制一个折角的矩形或者圆角的矩形时，就需要借助 lineJoin 这个属性。不过有一点需要特别注意， lineJoin 只适合于线段连接触端的样式控制。也就是说，他只适合边框矩形，如果没有边框的矩形是不生效的。话又说回来，如果需要一个填充的矩形需要有折角或圆角的效果时，就需要在填充矩形上加一个与填充色相同的边框。

function drawScreen () { ctx.lineWidth = 10; ctx.strokeStyle = '#f99' ctx.lineJoin = "bevel"; ctx.strokeRect(10,10,200,200); ctx.lineJoin = "round"; ctx.strokeRect(250,10,200,200); }