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 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
用纯css3和html制作泡沫对话框实现代码
Mar 21 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 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 的 __FILE__ 常量
2007/01/15 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
jquery异步调用页面后台方法‏(asp.net)
2011/03/01 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
爱祖国演讲稿
2014/05/04 职场文书
团结演讲稿范文
2014/05/23 职场文书
毕业生求职信
2014/06/10 职场文书
个人授权委托书范本
2014/09/14 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript