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图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
javascript 的Document属性和方法集合
2010/01/25 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
python实现中文输出的两种方法
2015/05/09 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
python 处理string到hex脚本的方法
2018/10/26 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
在线服装零售商:SheIn
2016/07/22 全球购物
生物制药专业自我鉴定
2014/02/19 职场文书
市级文明单位申报材料
2014/05/07 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
暂住证证明
2015/06/19 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python