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实现跳动的动画效果
Sep 12 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
PHP number_format() 函数定义和用法
2012/06/01 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
php定界符
2014/06/19 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
基于python实现微信模板消息
2015/12/21 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Django配置文件代码说明
2019/12/04 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
HEMA英国:荷兰原创设计
2018/08/28 全球购物
2013英文求职信模板范文
2013/11/15 职场文书
人力资源总监工作说明
2014/03/03 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
庆七一主持词
2015/06/29 职场文书
2019年最新借条范本!
2019/07/08 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js