《HTML5 Canvas游戏开发实战》——1.2 Canvas简介

本节书摘来自华章计算机《html5 canvas游戏开发实战》一书中的第1章，第1.2节,作者：张路斌著， 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

canvas 元素是html5的新元素之一，用于在网页上绘制图形，相当于在html中嵌入了一张画布，这样就可以直接在html上进行图形操作了，所以它具有极大的应用价值。canvas 元素本身是没有绘图能力的，它需要借助javascript来实现绘图功能。

1.2.1　canvas标签的历史

canvas这个 html 元素是为客户端矢量图形而设计的。它自己没有行为，只是把一个绘图 api 展现给了客户端 javascript，以使脚本能够把想绘制的东西都绘制到一块画布上。

< canvas >标记由 apple 在 safari 1.3 web 浏览器中引入。对 html进行这一扩展的原因在于，希望html 在 safari 中的绘图能力也能为 mac os x 桌面的 dashboard 组件所使用，并且 apple 希望有一种方式在 dashboard 中支持脚本化的图形。

firefox 1.5 和 opera 9 都跟随了 safari 的引领，这两个浏览器都支持< canvas>标记。

可以在 ie 中使用< canvas>标记，并在 ie 的 vml 支持基础上用开源的 javascript 代码（由 google 发起）来构建具有兼容性的画布。

< canvas>的标准化工作正在由一个 web 浏览器厂商的非正式协会进行推动。目前< canvas>已经成为 html5 草案中一个正式的标签。

1.2.2　canvas的定义和用法

使用canvas标签，只需要向html5里添加canvas元素即可，代码如下：

1.2.3　如何使用canvas来绘图

前面已经提到，canvas 元素本身是没有绘图能力的，所有的绘制工作必须在 javascript 内部完成。下面来看看如何使用canvas来绘图。

代码清单1-7所示代码可以实现绘制一个矩形。

代码清单　1-7

下面来分析一下以上代码。要使用canvas元素，首先要根据id或name，将canvas对象取出来，上面的代码使用的是getelementbyid方法，如果给canvas标签加入了name属性，那么也可以使用getelementbytagname来获取canvas对象。

另外，要使用canvas元素，必须先判断这个元素是否存在及用户所使用的浏览器是否支持此元素。如果无法使用canvas元素，那么下面做的所有事情都是无意义的。

上面的代码在使用getcontext方法时，传递了一个“2d”参数，这就可以得到二维的context对象以实现二维图形的描画。试想一下，如果将来canvas可以描画三维图形，或许也可以使用“3d”参数。但是目前还只能使用“2d”作为参数。

在上面的例子中，采用fillstyle方法将画笔颜色设置为红色。另外，用fillrect方法规定了图形的形状、位置和尺寸。更多canvas的使用方法，将会在第2章之后进行详细介绍。

1.2.4　canvas的限制

使用canvas可拥有多种绘制路径、矩形、圆形、字符及添加图像的方法。但是绘制的图形是静止的，如果要让所画的图形动起来，则需要画出每一帧的图形，然后再连接起来。这些都会在后面的章节做详细的介绍。

虽然canvas可以对图形进行一系列操作，但是效率和普及性都存在一定的问题，对于一些相对复杂的图形和动画等，目前来看，还是flash更胜一筹。

另外，canvas是html5的新属性，在使用时需要考虑用户的浏览器和使用环境。

canvas目前只是一张二维画布，如果要想实现三维效果，需要借助第三方类库，如three.js或者papervision3d等。