自己写的HTML5 canvas动画制作函数,非常简单易懂
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,target-densitydpi=high-dpi,initial-scale=0.36, minimum-scale=0.36, maximum-scale=2, user-scalable=yes" />
<meta charset="utf-8" />
<title>动画</title>
<link rel="stylesheet"href="include/css/global.css"type="text/css" />
<link rel="stylesheet" type="text/css"href="css/scrollbar.css"/>
<link rel="stylesheet" type="text/css"href="css/style.css?id=1"/>
<script src="js/jquery-1.6.4.min.js"></script>
<script type="application/javascript"src="js/iscroll.js?v4"></script>
<script type="text/javascript"src="js/swipeview.js"></script>
<script type="application/javascript"src="js/common.js"></script>
<script>
var mycanvas,context;
var background=new Image();
var atm = new sprite();
var clock = new sprite();
var wheel = new sprite();
var lightning = new sprite();
var truck = new sprite();
var windmill = new sprite();
var ibmlogo = new sprite();
var balloon = new sprite();
var clouds = new sprite();
var windmillImage=new Image();
windmillImage.src = "images/windmill.png";
windmill.images.push(windmillImage);
var ibmlogoIMG=new Image();
ibmlogoIMG.src = "images/ibmlogo.png";
ibmlogo.images.push(ibmlogoIMG);
var cloudsIMG=new Image();
cloudsIMG.src = "images/clouds.png";
clouds.images.push(cloudsIMG);
clouds.time = 200;
var balloonIMG=new Image();
balloonIMG.src = "images/balloon.png";
balloon.images.push(balloonIMG);
balloon.x = 0;
balloon.y = 800;
balloon.time = 200;
atm.time = 2;
clock.time = 10;
wheel.time =1;
truck.time = 30;
truck.x = (4540 + 562/2)*0.2;
truck.y = (6039 + 858/2)*0.2;
var context;
var i = 0;
background.src="images/animateBackground.png";
for(var i=1; i<=12; i++){
var temp=new Image();
temp.src = "images/atm/atm" + i +".png";
atm.images.push(temp);
}
for(var i=1; i<=13; i++){
var temp=new Image();
temp.src = "images/clock/clock" + i +".png";
clock.images.push(temp);
}
for(var i=1; i<=3; i++){
var temp=new Image();
temp.src = "images/wheel/wheel" + i +".png";
wheel.images.push(temp);
}
var lightning1=new Image();
lightning1.src = "images/lightning1.png";
var lightning2=new Image();
lightning2.src = "images/lightning2.png";
lightning.images.push(lightning1);
lightning.images.push(lightning2);
lightning.images.push(lightning2);
lightning.images.push(lightning2);
var truckimg=new Image();
truckimg.src = "images/truck.png";
truck.images.push(truckimg);
window.onload = function(){
var mycanvas=document.getElementById("myCanvas");
context=mycanvas.getContext('2d');
context.drawImage(background,0,0);
setInterval(doAnimate,100)
}
var k=0;
function doAnimate(){
context.drawImage(background,0,0);
atm.draw(553,695);
clock.draw(795,405);
wheel.draw(618,278);
lightning.draw(23*0.2,2843*0.2);
balloon.moveTo(800,400);
//truck.moveTo((2660 + 562/2)*0.2, (3850 + 858/2)*0.2);
windmill.rotate(2532*0.2+38,773*0.2+48);
windmill.rotate(1469*0.2+38,1342*0.2+48);
windmill.rotate(3360*0.2+38,518*0.2+48);
windmill.rotate(3438*0.2+38,992*0.2+48);
ibmlogo.draw((2540)*0.2, (4082)*0.2);
clouds.moveTo(200,100);
k++;
}
//自己写个动画精灵类吧!
function sprite(){
this.i= 0;
this.time = 1;
this.count = 0;
this.x = 0;
this.y = 0;
this.images = [];
var instance = this;
this.draw =function(x,y){
instance.count++;
if(instance.i == instance.images.length){
instance.i=0;
}
var img = instance.images;
context.drawImage(img[instance.i],x,y);
if(instance.count%instance.time ==0) instance.i++;
}
this.moveTo = function(x,y){
instance.count++;
if(instance.i == instance.images.length){
instance.i=0;
}
var img = instance.images;
var delx = (x - instance.x)/instance.time;
var dely = (y - instance.y)/instance.time;
var step = (instance.count%instance.time);
//console.log(instance.x+step*delx);
context.drawImage(img[instance.i],instance.x+step*delx ,instance.y+step*dely);
if(instance.count%instance.time ==0) instance.i++;
}
this.rotate = function(x,y){
instance.count++;
if(instance.i == instance.images.length){
instance.i=0;
}
var img = instance.images;
context.save()
context.translate(x,y);
context.rotate(k * Math.PI / 18);
context.drawImage(img[instance.i], -img[instance.i].width/2, -img[instance.i].height/2);
context.translate(-x,-y);
context.restore()
if(instance.count%instance.time ==0) instance.i++;
}
}
function shwoMenu(){
$("#menu").toggle();
}
</script>
</head>
<body>
<div style="margin-left:0px;">
<canvas id="myCanvas" width="885" height="1430"
style="background-im:blue;"onclick="shwoMenu()"></canvas>
</div>
<div id="menu"style="position:absolute;margin-top:-1430px;margin-left:0px;display:none">
<div style="float:left;margin-left:540px;margin-top:40px"><imgsrc="images/energyICON.png"width="200"height="200"></div>
<div style="float:left;margin-left:80px;margin-top:500px"><imgsrc="images/insuranceICON.png"width="200"height="200"></div>
<div style="float:left;margin-left:200px;margin-top:250px"><imgsrc="images/bankICON.png"width="200"height="200"></div>
<div style="float:left;margin-left:50px;margin-top:450px"><imgsrc="images/saleICON.png"width="200"height="200"></div>
<div style="float:left;margin-left:-400px;margin-top:-450px"><imgsrc="images/carICON.png"width="200"height="200"></div>
</div>
</body>
</html>