网页中基于HTML5 canvas的动画实现

龚丽

摘要：canvas是HTML5新增的一个非常重要的元素，通过这个元素，我们可以在网页上创建画布，并在画布上绘制任意图形或图像。canvas还有一个特性就是可以在其内部创建动画，通过设置时间循环，让图形或图像动起来。

关键词：HTML5 canvas元素 绘制图形 drawlmage（） setlnterval（）

引言

1基本图形绘制

在网页中绘制基本图形，需要经过以下3个步骤：

（1）在HTML页面文档中放置一个canvas元素，相当于创建了一个矩形绘图区域，并设置canvas元素的id。

（3）通过绘图API在页面中绘制各种图形。

下面我们举例来看矩形、圆形的绘制编程。

首先，在HTML文档中放置元素，元素本身是不包含宽度、高度及内容，也不会在屏幕上有任何显示，所以大部分情况下在创建时注明宽度及高度，并设置id。

在浏览器运行结果如下图1。

2在canvas中绘制图像

在HTML5中，除了可以绘制形状，也可以通过canvas API绘制图像文件，并对图像进行平铺、裁剪、像素处理等操作。

绘制图像时，需要使用drawlmage（）方法，该方法有3种调用格式：

ctx.drawlmage（image， x，y）;

其中lrnage为图像对象，x、y为绘制时该图像在画布中的起始坐标。

ctx.drawlmage（image， x，y.w， h）;

前三个参数与第一种调用格式相同，w、h为图像缩放至画布中的宽度和高度。

ctx. drawlmage（image， sx.sy.sw.sh.dx. chr. dw， dh）;

这种调用格式有9个参数，主要实现对原图的局部或全部显示。其中image，dx，dy， dw，dh的用法与第二种格式相同，参数sx，sy，sw，sh表示源图像需要裁剪的范围。

绘制图像时首先使用不带参数的new方法创建Image对象，并设置Image对象的src属性，即需要绘制的图像文件路径。再使用drawlmage0方法绘制。比如我们将一张风车图像绘制到canvas画布中。代码如下：

在浏览器运行结果如下图2。

3动画实现

（1）编写绘制图形或图像的函数;

（2）自定义一个函数，用于图形或图像的移动或其他动作;

（3）使用setlnterval（）方法设置动画执行的间隔时间，反复执行上面的自定义函数。

（4）当需要停止循环时，用clearlnterval（）清空计时器。

setlnterval方法为HTML中固有的方法，setlnterval（）每隔一段时间调用一次函数，即设置循环的计时器。该方法接受两个参数，第一个参数表示执行的函数，第二个参数为时间间隔，单位为毫秒。编写动画脚本时有一点需要特别注意，当我们移动绘制好的图形或图像时，其实就是对图形或图像进行重绘，这时要先清空，如果不清空，新画的形状就会重叠到原形状上。

运行结果是小球会在画布框中上下左右来回移动碰到墙（即边框）则反弹。

图像动画

我们再来看一个图像动画的实现，在canvas中绘制风车图像，并让风车旋转起来。

translate0方法能平移坐标原点，在此例中我们把坐标原点从画布左上角的默认位置移动到画布中心，这样图形围绕原点旋转，就会在画布中间。它的两个参数分别是x方向移动的值及y方向移动的值。rotate0方法能将原点坐标进行旋转，从而实现图形的旋转。它只有一个参数，即旋转的角度。旋转默认以顺时针方向进行，要想逆时针旋转，则将角度设定为负数就可以了。

4结束语

在中创建动画虽然实现起来比较简单，但不断的图形重绘非常消耗CPU资源，若需要在移动设备的浏览器中使用，必须考虑动画（或者游戏）的优化。比如上例中的风车旋转动画，由于要不断重绘风车图像，该过程中，当擦除整个canvas后，浏览器到达重绘点，会绘制空白的canvas，从而造成视觉上的闪烁问题。可以采用双缓冲方法来解决，即获取到页面中的canvas对象之后，创建一个与页面canvas同样大小的缓冲canvas对象。绘图时先将图像绘制到缓冲canvas中，等到图像绘制完全后再把整个缓冲canvas绘制到页面canvas中。

参考文献

[1]《HTML5从入门到精通》明日科技编著.北京：清华大学出版社，2012： 347-348

[2]《HTML5与CSS3权威指南》陆凌牛著，北京：机械工业出版社，2012： 107-111

[3]《HTML5实战》 陶国荣著，北京：机械工业出版社，2012： 185-188