HTML5 Canvas中绘制矩形实例


Posted in HTML / CSS onJanuary 01, 2015

本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “The Basic Rectangle Shape”.

让我们来看一下Canvas内置的简单几何图形 — 矩形的绘制。在Canvas中,绘制矩形有三种方法:填充(fillRect)、描边(StrokeRect)以及清除(clearRect)。当然,我们也可以使用“路径”来描绘包括矩形在内的所有图形。

以下是上述三种方法的API:

1.fillRect(x,y,width,height)。绘制一个从(x,y)开始,宽度为width,高度为height的实心矩形。
2.strokeRect(x,y,width,height)。绘制一个从(x,y)开始,宽度为width,高度为height的矩形框。该矩形框会根据当前设置的strokeStyle、lineWidth、lineJoin和miterLimit属性的不同而渲染成不同的样式。
3.clearRect(x,y,width,height)。清除从(x,y)开始,宽度为width,高度为height的矩形区域,使之完全透明。

在调用上述方法绘制Canvas之前,我们需要设定填充和描边的样式。设定这些样式最基本的方法是使用24位色(用16进制字符串表示)。以下是一个简单的例子:

复制代码
代码如下:

context.fillStyle = "#000000";
context.strokeStyle = "#ff00ff";

在下面的例子中,填充色设定为黑色,而描边色则设定为紫色:
复制代码
代码如下:

function drawScreen() {
context.fillStyle = "#000000";
context.strokeStyle = "#ff00ff";
context.lineWidth = 2;
context.fillRect(10, 10, 40, 40);
context.strokeRect(0, 0, 60, 60);
context.clearRect(20, 20, 20, 20);
}

代码执行结果如下图所示:

HTML5 Canvas中绘制矩形实例

HTML / CSS 相关文章推荐
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
flex弹性布局详解
Mar 20 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 #HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 #HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 #HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 #HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 #HTML / CSS
浅谈html5 响应式布局
Dec 24 #HTML / CSS
HTML5进度条特效
Dec 18 #HTML / CSS
You might like
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
vue之延时刷新实例
2019/11/14 Javascript
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
python django生成迁移文件的实例
2019/08/31 Python
python文件操作的简单方法总结
2019/11/07 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
10条PHP编程习惯
2014/05/26 面试题
建设幸福中国演讲稿
2014/09/11 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
工会积极分子个人总结
2015/03/03 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
离婚案件原告代理词
2015/05/23 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书