【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

posted @ 2013-05-29 16:22 bloger11 阅读(6850) 评论(0) 编辑收藏举报

刷新页面返回顶部

blog11

【HTML 5】HTML5 Canvas rect(), strokeRect() 和 fillRect() 的区别

fillRect()

strokeRect()

rect()

公告

Bingo!!