当前位置：
文档之家› 5.6 HTML5的图像及动画制作动画
5.6 HTML5的图像及动画制作动画
{
x++; } if (y<200) {
y++;
} context.fillRect(x,y,50,50); } function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "red"; context.fillRect(0,0,50,50); setInterval(move,200); //每200毫秒调用move方法一次 } </script> <fieldset> <legend>简单动画效果</legend>
<canvas id="myCanvas" width=Байду номын сангаас400px" height="200px"> </canvas> <br> <button onclick="draw()">绘图</button> </fieldset> </html>
保存此段代码并在浏览器中运行，当单击“绘图”按钮时，一个红色的方块将不断移 动，形成动画，效果如图5-25和图5-26所示。
第5章 HTML5的图像及动画 5.1 canvas元素 5.2 使用路径画图
5.3 图形操作
5.4 图像操作 5.5 canvas其他操作 5.6 制作动画 5.7 上机实践——绘制时钟
5.6 制作动画
在HTML5中通过绘制图形、清除图形、再绘制图形、再清除图形的方式，可以实现简 单的动画效果。具体实现步骤分为两步。 （1）编写绘图方法，用于实现绘制或清除图形。 （2）编写JavaScript方法并调用setInterval方法设置绘图动作执行间隔，以实现自动绘图、 清除操作，形成动画效果。其中setInterval方法有两个参数，第一个参数用于设置要执 行的绘图方法，第二个参数用于设置时间间隔，单位为毫秒。 下面通过一个例子介绍HTML5中动画的实现方式及效果，示例代码如下。 <!DOCTYPE html> <html> <meta charset="gb2312" /> <script> var x=0,y=0; //绘制矩形，其中矩形的起始点坐标为动态增加 function move() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.clearRect(0,0,400,200); if (x<400)
图5-25 动画开始时方块位置
图5-26 动画执行一段时间后方块位置
