【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>