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

什么是c艾叶的作用anvas

<canvas>是一个新的html元素，这个元素在html5中被定义。这个元素通常可以被用来在html页面中通过javascript进行绘制图形、合成图像等等操作，也可以用来做一些动画。当然，目前html5规范还在草稿阶段，正式发布也许要等到2010年，不过现在已经有不少浏览器已经支持了部分html5规范。目前支持canvas元素的浏览器有firefox3+、safari4、chrome2.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：

<canvas id=”screen” width=”400″ height=”400″></canvas> <script type=”text/javascript”> var canvas = document.getelementbyid(“screen”); var ctx = canvas.getcontext(“2d”); </script>

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

firefox3.0.x的尴尬

firefox3.0.x虽然支持了canvas元素，但是并没有完全按照规范来实现，规范中的filltext、measuretext两个方法在firefox3.0.x中被几雅思教育部个firefox特有的方法代替，因此在firefox3.0.x中使用canvas时需要先fix这个几个方法在不同浏览器中的差别。

下面这代码取自mozillabespin项目，它修正了firefox3.0.x中canvas的context对象与html5规范不一致的地方：

function fixcontext(ctx) { // * upgrade firefox 3.0.x text rendering to html 5 standard if (!ctx.filltext && ctx.mozdrawtext) { ctx.filltext = function(texttodraw, x, y, maxwidth) { ctx.translate(x, y); ctx.moztextstyle = ctx.font; ctx.mozdrawtext(texttodraw); ctx.translate(-x, -y); }; } // * tup measuretext if (!ctx.measuretext && ctx.mozmeasuretext) { ctx.measuretext = function(text) { if (ctx.font) ctx.moztextstyle = ctx.font; var width = ctx.mozmeasuretext(text); return { width: width }; }; } // * tup html5measuretext if (ctx.measuretext && !ctx.html5measuretext) { ctx.html5measuretext = ctx.measuretext; ctx.measuretext = function(text) { var textmetrics = ctx.html5measuretext(text); // fake it ’til you make it textmetrics.ascent = ctx.html5measuretext(“m”).width; return textmetrics; }; } // * for other browrs, no-op away if (!ctx.filltext) { ctx.filltext = function() {}; } if (!ctx.measuretext) { ctx.measuretext = function() { return 10; }; } return ctx; }

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

注意：到opera9.5为止，opera还不支持html5规范中canvas对象的filltext以及其相关方法和属性。

hello,canvas!

在对canvas进行了一些初步了解后，开始来写我们的第一个canvas程序，闻名的helloworld的又一个分支“hell办公室工作制度o,canvas”：

<canvas id=”screen” width=”400″ height=”400″></canvas> <script type=”text/javascript”> (function() { var canvas = document.getelementbyid(“screen”); var ctx = fixcontext(canvas.getcontext(“2d”)); ctx.font = “20pt arial”; ctx.filltext(“hello, canvas!”, 20, 20); ctx.filltext(“www.xujiwei.com”, 20, 50); function fixcontext(ctx) { // * upgrade firefox 3.0.x text rendering to html 5 standard if (!ctx.filltext && ctx.mozdrawtext) { ctx.filltext = function(texttodraw, x, y, maxwidth) { ctx.translate(x, y); ctx.moztextstyle = ctx.font; ctx.mozdrawtext(texttodraw); ctx.translate(-x, -y); }; } // * tup measuretext if (!ctx.measuretext && ctx.mozmeasuretext) { ctx.measuretext = function(text) { if (ctx.font) ctx.moztextstyle = ctx.font; var width = ctx.mozmeasuretext(text); return { width: width }; }; } // * tup html5measuretext if (ctx.measuretext && !ctx.html5measuretext) { ctx.html5measuretext = ctx.measuretext; ctx.me爱情技巧asuretext = function(text) { var textmetrics = ctx.html5measuretext(text); // fake it ’til you make it textmetrics.ascent = ctx.html5measuretext(“m”).width; return textmetrics; }; } // * for other browrs, no-op away if (!ctx.filltext) { ctx.filltext = function() {}; } if (!ctx.measuretext) { ctx.measuretext = function() { return 10; }; } return ctx; } })(); </script>

提示：您打折可以先修改部分代码再运行

运行示例，canvas对象所在区域显示出“hello,world!”，这正是代码中ctx.filltext(“hello,world!”,20,20);的作用。

filltext以及相关属性

filltext方法用来在canvas中显示文字，它可以接受四个参数，其中最后一个是可选的：

voidfilltext(indomstringtext,infloatx,infloaty,[optional]infloatmaxwidth);

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

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

结束

暂时就到这里了，我会一边看规范一边写这个系列：）

参考资料

1.html5的canvas，脚本语言的新舞台,hred

2.thecanvalement,whatwg

3.canvastutorial中文,mozilla

4.canvastutorial英文,mozilla

5.canvassupportinopera,opera