什么是canvas
<canvas> 是一个新的 html 元素,这个元素在 中被定义。这个元素通常可以被用来在 html 页面中通过 javascript 进行绘制图形、合成图像等等操作,也可以用来做一些动画。当然,目前 html5 规范还在草稿阶段,正式发布也许要等到2010年,不过现在已经有不少浏览器已经支持了部分 html5 规范。目前支持 canvas 元素的浏览器有 firefox 3+、safari 4、chrome 2.0+ 等,因此,在运行本页中的例子时,请确保你使用的是上述浏览器之一。
尽管在 已经有不少关于 canvas 的教程,我还是决定把自己的学习过程记录下来。如果觉得我写的不够明白,那么你可以在参考资料中找到 mozilla 网站上 canvas 教程的链接。
另外,可以在找到一些有趣的 canvas 示例。
开始使用 canvas
使用 canvas 很简单,与使用其他 html 元素一样,只需要在页面中添加一个 <canvas> 标签即可:
firefox 3.0.x 的尴尬
firefox 3.0.x 虽然支持了 canvas 元素,但是并没有完全按照规范来实现,规范中的 filltext、measuretext 两个方法在 firefox 3.0.x 中被几个 firefox 特有的方法代替,因此在 firefox 3.0.x 中使用 canvas 时需要先 fix 这个几个方法在不同浏览器中的差别。
下面这代码取自 项目,它修正了 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.
2.
3. canvas tutorial 中文, mozilla
4. canvas tutorial 英文, mozilla
5.
如对本文有疑问, 点击进行留言回复!!
网友评论