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

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>

 

 

效果:

【HTML 5】HTML5 Canvas rect(), strokeRect() 和 fillRect() 的区别_第1张图片

 

rect()

 

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

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

<html>

<head>

<title>HTML 5 Canvas recttitle>

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

你可能感兴趣的:(【HTML 5】HTML5 Canvas rect(), strokeRect() 和 fillRect() 的区别)