【HTML 5】HTML5 Canvas rect(), strokeRect() 和 fillRect() 的区别
他们都接受相同的参数，见页面表格。唯一不同的实现方式与效果方面有差异。
其中fillRect()与strokeRect() 在调用后会立即在画布上画面效果，而rect()不会立即将图形画出，只有在调用了stroke()方法之后，才会实际作用于画布。
fillRect()
从字面上很好理解fillRect()与其他两个的区别，它是执行填充操作。填充一个矩形区域。
下面是来自W3SHOOL中文站点对它的具体参数及API的详解：
定义和用法
fillRect() 方法绘制"已填色"的矩形。默认的填充颜色是黑色。
|
参数 |
描述 |
|
x |
矩形左上角的 x 坐标 |
|
y |
矩形左上角的 y 坐标 |
|
width |
矩形的宽度，以像素计 |
|
height |
矩形的高度，以像素计 |
strokeRect()
strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。
下面看一下strokeRect() 与fillRect()的例子。
<html> <head> <title>HTML 5 Canvas rect</title> </head> <body> <canvas id="c" width="400" height="300"></canvas> </body> <script type="text/javascript"> var c = document.getElementById('c'); var ctx = c.getContext('2d'); // draw rectangle via strokeRect() method ctx.strokeRect(0, 0, 100, 100); // draw rectangle via fillRect() method ctx.fillRect(101, 0, 100, 100); </script> </html>
效果：
rect()
rect() 方法创建矩形。但它并不会真正将矩形画出，只能调用stroke() 或 fill()后才会真正作用于画布。
下面的例子将展示这一特性。
<html> <head> <title>HTML 5 Canvas rect</title> </head> <body> <canvas id="c" width="400" height="300"></canvas> </body> <script type="text/javascript"> var c = document.getElementById('c'); var ctx = c.getContext('2d'); // draw rectangle via strokeRect() method ctx.rect(0, 0, 100, 100); //set time out, the rectngle will be drawed out after 5 secs. setTimeout(function () { ctx.stroke() }, 5000) </script> </html>
虽然执行了rect(),但只有5秒后执行了stroke()后，画布上才会出现矩形图案。
参考：
http://www.rgraph.net/blog/2013/january/the-difference-between-rect-strokerect-and-fillrect.html
CC BY-NC-SA 署名-非商业性使用-相同方式共享
