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

其中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

转载于:https://my.oschina.net/shejizhijia/blog/1548365

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

HTML5 Canvas中 fillText() 和 strokeText() 的区别
前言 Canvas现在越来越多地被运用到我们的项目中了,所以对Canvas的研究也得跟上呀,不然就被时代抛弃了.这次要给大家分享的是 HTML5 Canvas 中的 fillText 和 stroke ...
HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅 ...
HTML5 Canvas 基础API和实例
开发HTML代码是一件简单的事情,一个文字编辑器,然后一个支持HTML5的浏览器即可(本人的浏览器是Firefox8.0.1).了解HTML的朋友应该知道,HTML5中最让人兴奋的API是canvas ...
HTML5 Canvas
HTML5 Canvas 转自:https://blog.csdn.net/u012468376/article/details/73350998 一.canvas简介 <canvas&g ...
《HTML5 Canvas游戏开发实战》——2.1　绘制基本图形
本节书摘来自华章计算机<HTML5 Canvas游戏开发实战>一书中的第2章,第2.1节,作者:张路斌著, 更多章节内容可以访问云栖社区"华章计算机"公众号查看. 2. ...
[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
HTML5 Canvas专题
HTML5 canvas专题 canvas参考手册路径方法线条样式矩形圆.圆弧 arc:创建圆.弧.曲线 arcTo:创建弧.曲线贝塞尔曲线剪切路径状态的保存和恢复阴影.渐变.填充阴 ...
html5 Canvas 绘制基本图形从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形从绘制直线到路径 Jack Lee 的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
HTML5 canvas 参考手册
HTML5 <canvas> 参考手册描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元 ...
学习HTML5 Canvas这一篇文章就够了
一.canvas简介 <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...

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

fillRect()

strokeRect()

rect()

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

最新文章

热门文章