HTML5 Canvas 起步(1) - 基本概念


Posted in HTML / CSS onMay 12, 2009

什么是Canvas

<canvas> 是一个新的 HTML 元素,这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作,也可以用来做一些动画。当然,目前 HTML5 规范还在草稿阶段,正式发布也许要等到2010年,不过现在已经有不少浏览器已经支持了部分 HTML5 规范。目前支持 canvas 元素的浏览器有 Firefox 3+、Safari 4、Chrome 2.0+ 等,因此,在运行本页中的例子时,请确保你使用的是上述浏览器之一。

尽管在 Mozilla 已经有不少关于 Canvas 的教程,我还是决定把自己的学习过程记录下来。如果觉得我写的不够明白,那么你可以在参考资料中找到 Mozilla 网站上 Canvas 教程的链接。

另外,可以在这里找到一些有趣的 Canvas 示例。

开始使用 Canvas

使用 Canvas 很简单,与使用其他 HTML 元素一样,只需要在页面中添加一个 <canvas> 标签即可:

复制代码
代码如下:

<canvas id="screen" width="400" height="400"></canvas>

当然,这样只是简单的创建了一个 Canvas 对象而已,并没有对它进行任何操作,这个时候的 canvas 元素看上去与 div 元素是没什么区别的,在页面上什么都看不出来:)
另外,canvas 元素的大小可以通过 width 与 height 属性来指定,这与 img 元素有点相似。
Canvas 的核心:Context
前面说到可以通过 JavaScript 来操作 Canvas 对象来进行绘制图形、合成图像等操作,这些操作并不是通过 Canvas 对象本身来进行的,而是通过 Canvas 对象的一个方法 getContext 获取 Canvas 操作上下文来进行。也就是说,在后面我们使用 Canvas 对象的过程中,都是与 Canvas 对象的 Context 打交道,而 Canvas 对象本身可以用来获取 Canvas 对象的大小等信息。
要获取 Canvas 对象的 Context 很简单,直接调用 canvas 元素的 getContext 方法即可,在调用的时候需要传递一个 Context 类型参数,目前可以用的并且是唯一可以用的类型值就是 2d:

提示:您可以先修改部分代码再运行

Firefox 3.0.x 的尴尬

Firefox 3.0.x 虽然支持了 canvas 元素,但是并没有完全按照规范来实现,规范中的 fillText、measureText 两个方法在 Firefox 3.0.x 中被几个 Firefox 特有的方法代替,因此在 Firefox 3.0.x 中使用 Canvas 时需要先 fix 这个几个方法在不同浏览器中的差别。

下面这代码取自 Mozilla Bespin 项目,它修正了 Firefox 3.0.x 中 Canvas 的 Context 对象与 HTML5 规范不一致的地方:


提示:您可以先修改部分代码再运行

注意:到 Opera 9.5 为止,Opera 还不支持 HTML5 规范中 Canvas 对象的 fillText 以及其相关方法和属性。

Hello, Canvas!

在对 Canvas 进行了一些初步了解后,开始来写我们的第一个 Canvas 程序,闻名的 HelloWorld 的又一个分支“Hello, Canvas”:


提示:您可以先修改部分代码再运行

运行示例,Canvas 对象所在区域显示出“Hello, World!”,这正是代码中 ctx.fillText("Hello, World!", 20, 20); 的作用。

fillText 以及相关属性

fillText 方法用来在 Canvas 中显示文字,它可以接受四个参数,其中最后一个是可选的:

void fillText(in DOMString text, in float x, in float y, [Optional] in float maxWidth);

其中 maxWidth 表示显示文字时最大的宽度,可以防止文字溢出,不过我在测试中发现在 Firefox 与 Chomre 中指定了 maxWidth 时也没有任何效果。

在使用 fillText 方法之前,可以通过设置 Context 的 font 属性来调整显示文字的字体,在上面的示例中我使用了“20pt Arial”来作为显示文字的字体,你可以自己设置不同的值来看具体的效果。

结束

暂时就到这里了,我会一边看规范一边写这个系列:)

参考资料

1. HTML5的Canvas,脚本语言的新舞台, hred

2. The Canvas Element, WHATWG

3. Canvas Tutorial 中文, Mozilla

4. Canvas Tutorial 英文, Mozilla

5. canvas support in Opera, Opera

HTML / CSS 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 #HTML / CSS
HTML5中的新元素介绍
Oct 17 #HTML / CSS
自定义html标记替换html5新增元素
Oct 17 #HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 #HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 #HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 #HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 #HTML / CSS
You might like
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python实现的重启关机程序实例
2014/08/21 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
房地产管理毕业生自荐信
2013/11/04 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
经典演讲稿开场白
2014/08/25 职场文书
公证委托书格式
2014/09/13 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers