：点上面关注免费学习前端知识！

矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形有关的方法包括fillRect() 、 strokeRect() 和 clearRect() 。这三个方法都能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

首先， fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定，比如：

var drawing = document.getElementById(“drawing”);

//确定浏览器支持<canvas>元素

if (drawing.getContext){

var context = drawing.getContext(“2d”);

/*

* 根据Mozilla的文档

* http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_usage

*/

//绘制红色矩形

context.fillStyle = ”#ff0000”;

context.fillRect(10, 10, 50, 50);

//绘制半透明的蓝色矩形

context.fillStyle = “rgba(0,0,255,0.5)”;

context.fillRect(30, 30, 50, 50);

}

以上代码首先将 fillStyle 设置为红色，然后从(10,10)处开始绘制矩形，矩形的宽和高均为50像素。然后，通过 rgba() 格式再将 fillStyle 设置为半透明的蓝色，在第一个矩形上面绘制第二个矩形。结果就是可以透过蓝色的矩形看到红色的矩形。

strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定。

描边线条的宽度由 lineWidth 属性控制，该属性的值可以是任意整数。另外，通过 lineCap 属性可以控制线条末端的形状是平头、圆头还是方头（ “butt” 、 “round” 或 “square” ），通过 lineJoin 属性可以控制线条相交的方式是圆交、斜交还是斜接（ “round” 、 “bevel” 或 “miter” ）。

最后， clearRect() 方法用于清除画布上的矩形区域。本质上，这个方法可以把绘制上下文中的某一矩形区域变透明。通过绘制形状然后再清除指定区域，就可以生成有意思的效果，例如把某个形状切掉一块。

var drawing = document.getElementById(“drawing”);

//确定浏览器支持<canvas>元素

if (drawing.getContext){

var context = drawing.getContext(“2d”);

/*

* 根据Mozilla的文档

* http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_usage

*/

//绘制红色矩形

context.fillStyle = ”#ff0000”;

context.fillRect(10, 10, 50, 50);

//绘制半透明的蓝色矩形

context.fillStyle = “rgba(0,0,255,0.5)”;

context.fillRect(30, 30, 50, 50);

//在两个矩形重叠的地方清除一个小矩形

context.clearRect(40, 40, 10, 10);

}

两个填充矩形重叠在一起，而重叠的地方又被清除了一个小矩形区域。

推荐阅读《canvas基本用法》《canvas填充描边》

完

看前端技术文章，就在Web前端精髓