首页 > 代码库 > canvas动画
canvas动画
在canvas中做动画是根据时间变化重新将canvas内容重新绘制，这样看起来就感觉是一个连贯的动画了。也就是一帧一帧的概念。每一帧的内容都是不一样的。
下面做一个齿轮从左到右滚动的动画。每隔一段时间重新绘制图片，然后移动图片的x轴，将图片旋转。这样就可以看出是滚动的。主要用到canvas的一个绘制图片的函数：
drawImage(img,x,y,width,height),canvas坐标改变函数translate(x,y),canvas旋转函数,rotate(deg).代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{
border:1px solid #03F;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="300"></canvas>
<script>
var canvas,
context,
geer=new Image(),
xpos,
stepCounter,
stepDegrees,
stepDistance,
stepSpeed,
stepsFullRevolition;
function init(){
canvas=document.getElementById(‘canvas‘);
context=canvas.getContext(‘2d‘);
stepCounter=0;
stepDegrees=2;
stepDistance=2;
stepSpeed=5;
stepsFullRevolition=parseInt(360/stepDegrees);
geer.addEventListener(‘load‘,initGeer,false);
geer.src=http://www.mamicode.com/‘images/cl.jpg‘;
}
function initGeer(){
xpos=-(geer.width/2);
moveGeer();
}
function moveGeer(){
context.clearRect(0,0,canvas.width,canvas.height);
context.save();
xpos+=stepDistance;
context.translate(xpos,canvas.height-(geer.width/2));
context.rotate(Math.PI*stepDegrees*stepCounter/180);
context.drawImage(geer,-(geer.width/2),-(geer.height/2),geer.width,geer.height);
context.restore();
if((xpos-(geer.width/2))<canvas.width){
stepCounter++;
if(stepCounter>=(stepsFullRevolition-1)){
stepCounter=0;
}
setTimeout(moveGeer,stepSpeed);
}
}
window.addEventListener(‘load‘,init,false);
</script>
</body>
</html>
每一帧开始时，首先清楚canvas内容clearRect(x,y,width,height),然后保存当前绘制环境，改变横坐标位置，将坐标原点放置新的位置。使用计时器setTimeout绘制齿轮内容，这样便有了动画滚动的效果。
canvas动画