2023年网页中基于HTML5canvas的动画实现.doc

网页中基于网页中基于 HTML5,canvasHTML5,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 中。参考文献 1HTML5 从入门到精通明日科技编著.北京：清华大学出版社，2012：347-348 2HTML5 与 CSS3 权威指南陆凌牛著，北京：机械工业出版社，2012：107-111 3HTML5 实战 陶国荣著，北京：机械工业出版社，2012：185-188