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个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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+MYSQL开发工具及资源收藏
2007/01/02 PHP
php strtotime 函数UNIX时间戳
2009/01/14 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
XENON基于JSON变种
2010/07/27 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
Jquery中"$(document).ready(function(){ })"函数的使用详解
2013/12/30 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python中常用的os操作汇总
2020/11/05 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
高中生学习的自我评价
2013/12/14 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
电子商务专业求职信
2014/03/08 职场文书
元旦联欢会主持词
2014/03/26 职场文书
入股协议书范本
2014/04/14 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
停发工资证明范本
2015/06/12 职场文书
2016党校学习心得体会
2016/01/07 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS