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 动画技术
Jul 27 HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
css常用字体属性与背景属性介绍
Feb 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
php include的妙用,实现路径加密
2008/07/29 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
vue实现验证码输入框组件
2017/12/14 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
python生成随机mac地址的方法
2015/03/16 Python
Python实现定时任务
2017/02/08 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
开展创先争优活动总结
2014/08/28 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
写给同事的离职感言
2015/08/04 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js