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.0新属性效果在ie下的解决方案
May 10 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 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
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
python批量生成条形码的示例
2020/10/10 Python
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
小学生秋游活动方案
2014/02/23 职场文书
公开服务承诺制度
2014/03/26 职场文书
平安建设工作方案
2014/06/02 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
中国合伙人观后感
2015/06/02 职场文书
余世维讲座观后感
2015/06/11 职场文书
改进工作作风心得体会
2016/01/23 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis