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

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

什么是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：

<canvas id="screen" width="400" height="400"></canvas> <script type="text/javascript"> var canvas = document.getElementById("screen"); var ctx = canvas.getContext("2d"); </script>
提示：您可以先修改部分具体代码再运行

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 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); }; } // * Setup 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 }; }; } // * Setup 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 browsers, 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 中显示文字，它可以接受四个具体参数，其中最后一个是可选的：

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