HTML5中Canvas rect(), strokeRect() 和 fillRect() 的区别

他们都接受相同的参数，见页面表格。唯一不同的实现方式与效果方面有差异。

其中fillRect()与strokeRect() 在调用后会立即在画布上画面效果，而rect()不会立即将图形画出，只有在调用了stroke()方法之后，才会实际作用于画布。

 

fillRect()

 

从字面上很好理解fillRect()与其他两个的区别，它是执行填充操作。填充一个矩形区域。

下面是来自W3SHOOL中文站点对它的具体参数及API的详解：

定义和用法

fillRect() 方法绘制"已填色"的矩形。默认的填充颜色是黑色。

 

参数	描述
x	矩形左上角的 x 坐标
y	矩形左上角的 y 坐标
width	矩形的宽度，以像素计
height	矩形的高度，以像素计

 

strokeRect()

 

strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。

下面看一下strokeRect() 与fillRect()的例子。

 

 

 

 

效果：

 

rect()

 

rect() 方法创建矩形。但它并不会真正将矩形画出，只能调用stroke() 或 fill()后才会真正作用于画布。

下面的例子将展示这一特性。

虽然执行了rect(),但只有5秒后执行了stroke()后，画布上才会出现矩形图案。