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与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 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 array_search() 函数使用
2010/04/13 PHP
php的字符串用法小结
2010/06/08 PHP
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
DOM 高级编程
2015/05/06 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
Python简单处理坐标排序问题示例
2019/07/11 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
解决django FileFIELD的编码问题
2020/03/30 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
遥感技术与仪器求职信
2014/02/22 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
2014年库房工作总结
2014/11/26 职场文书
党员个人总结范文
2015/02/14 职场文书
合同纠纷调解书
2015/05/20 职场文书
入党函调证明材料
2015/06/19 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书