本文介绍如何使用HTML5的Canvas元素创建动画效果，包括通过改变坐标实现连续动画、使用setInterval控制帧率及擦除和重绘图形的方法。
5、利用canvas元素绘制动画
在canvas画布中制作动画实际上就是不断变化坐标、擦除、重绘的过程
（1）设置动画的间隔时间：使用setInterval（执行动画的函数，间隔时间）全局方法
（2）设置绘图函数的方式一：通过不断变换x，y的坐标来实现
Index1.html文件中的代码如下：（Index2.html文件中把'canvas1.js'换成'canvas2.js'即可）
<!DOCTYPEhtml>
<html>
<head>
<meta charset='utf-8'>
<title>canvas绘制动画</title>
<script type="text/javascript"src='canvas1.js'></script>
</head>
<bodyonload="draw('canvas')">
<canvasid='canvas' width='400' height="400"></canvas>
</body>
</html>
canvas1.js文件中的代码如下：
//实现的动画效果：相同样式的矩形每隔100秒不断出现（可以模仿贪吃蛇，进度条的移动）
functiondraw(id){
var canvas=document.getElementById(id);
context=canvas.getContext('2d');
setInterval(painting,100);//每隔100毫秒执行一次painting函数，自带循环功能
i=0;
}
//动画的实现以画布大小为准，所以setInterval函数不用调用clearInterval就可以停止
functionpainting(){
context.fillStyle='green';//填充颜色为绿色
context.fillRect(i,0,10,10);//绘制起点的横坐标每次都是变化的
i=i+20;//横坐标每次都加20，矩形之间有间隔，一直到画布的边缘停止循环
//i++;横坐标每次只加1，矩形连起来在水平方向上慢慢移动
}
canvas2.js文件中的代码如下：
//实现的动画效果：从四个角开始以渐变的方式画一个叉号
functiondraw(id){
var canvas=document.getElementById(id);
context=canvas.getContext('2d');
setInterval(painting,10);//每隔10毫秒执行一次painting函数，自带循环功能
i=0;
}
//动画的实现以画布大小为准，所以setInterval函数不用调用clearInterval就可以停止
functionpainting(){
context.fillStyle='green';//填充颜色为绿色
context.fillRect(i,i,10,10);//横纵坐标从对角线的左上角方向开始移动
context.fillRect(400-i,400-i,10,10);//横纵坐标从对角线的右下角方向开始移动
context.fillRect(i,400-i,10,10);//横纵坐标从对角线的左下角方向开始移动
context.fillRect(400-i,i,10,10);//横纵坐标从对角线的右上角方向开始移动
i++;//横纵坐标每次只加1，矩形连起来在对角线的方向上移动
}
（3）设置绘图函数的方式二：用clearRect(x,y,width,height)方法将画布整体或者局部擦除，其中x,y是擦除的起点坐标，width、height是擦除的宽度和高度
canvas3.js文件中的代码如下：
//实现的动画效果：每次只有一个矩形不断在水平方向上移动
varcontext;
varwidth,height;
var i;
functiondraw(id){
var canvas=document.getElementById(id);
context=canvas.getContext('2d');
width=canvas.width;
height=canvas.height;
setInterval(painting,100);//每隔10毫秒执行一次painting函数，自带循环功能
i=0;
}
//动画的实现以画布大小为准，所以setInterval函数不用调用clearInterval就可以停止
functionpainting(){
context.fillStyle='#fff';//擦除颜色为白色
context.clearRect(0,0,width,height);//每次循环都擦除整个画布的图形，重新绘制新的矩形
context.fillStyle='green';//填充颜色为绿色
context.fillRect(i,20,10,10);//新绘制的矩形在水平方向上不断移动
i=i+20;
}
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
