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实现的响应式导航
Oct 31 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 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 selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
PHP实现简易计算器功能
2020/08/28 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
解析JavaScript中的标签语句
2013/06/19 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
Python实现购物系统(示例讲解)
2017/09/13 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
用Python解决x的n次方问题
2019/02/08 Python
Python-opencv 双线性插值实例
2020/01/17 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
全球在线商店:BerryLook
2019/04/14 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
物流管理应届生求职信
2013/11/07 职场文书
体育教育专业毕业生自荐信
2013/11/15 职场文书
送货司机岗位职责
2013/12/11 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
房屋出租协议书
2014/04/10 职场文书
党员转正介绍人意见
2015/06/03 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
Python 中的Sympy详细使用
2021/08/07 Python