requestAnimationFrame.js
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame || function( /* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / 60);
};
})();页面主要代码：
<!DOCTYPE HTML>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>视差动画</title>
<script type="text/javascript" src="js/jquery8.js"></script>
<script type="text/javascript" src="js/requestAnimationFrame.js"></script>
<style type="text/css">
body {
background:#dddddd;
}
#control {
width:1000px;
margin:0 auto;
}
#containter {
text-align:center;
} #canavas {
margin:10px;
padding:10px;
background:#ffffff;
border:thin #aaaaaa;
}
</style>
<script type="text/javascript"> $(function() { canvas = jQuery("#canavas")[0];
content = canvas.getContext("2d"); //天空背景
sky = new Image();
sky.src = "image/back.jpg"; //云朵
c1 = new Image();
c1.src = "image/cloud2.png"; c2 = new Image();
c2.src = "image/cloud1.jpg"; c3 = new Image();
c3.src = "image/cloud3.jpg"; lastTime = (+new Date())
requestAnimFrame(animate); pause=false;
$("#b1").click(function(){ pause=!pause; }); });
//获取随机数据
function getRandom(min, max) { return parseInt(Math.random() * (max - min) + min); } SKY_VELOCITY = 50;
skyOffset = 0; C1_VELOCITY = 100;
c1Offset = 0; C2_VELOCITY = 150;
c2Offset = 0; C3_VELOCITY = 200;
c3Offset = 0; fangxiag = 1; function drawBack() { //背景移位
skyOffset = skyOffset < sky.width ? skyOffset + SKY_VELOCITY / fps : 0; //远/中/近 三处的云朵移位
c1Offset = c1Offset < canvas.width ? c1Offset + C1_VELOCITY / fps : 0;
c2Offset = c2Offset < canvas.width ? c2Offset + C2_VELOCITY / fps : 0;
c3Offset = c3Offset < canvas.width ? c3Offset + C3_VELOCITY / fps : 0; //绘制三朵云
content.save();
content.translate(-skyOffset, 0);
content.drawImage(sky, 0, 0);
content.drawImage(sky, sky.width, 0);
content.restore(); content.save();
content.translate(-c1Offset, 0);
content.drawImage(c1, 50, 50);
content.drawImage(c1, 600, 70);
content.drawImage(c1, 1050, 50);
content.drawImage(c1, 1600, 70);
content.restore(); content.save();
content.translate(-c2Offset, 0);
content.drawImage(c2, 130, 120);
content.drawImage(c2, 730, 170);
content.drawImage(c2, 1130, 120);
content.drawImage(c2, 1730, 170);
content.restore(); content.save();
content.translate(-c3Offset, 0);
content.drawImage(c3, 600, 250);
content.drawImage(c3, 100, 320);
content.drawImage(c3, 1600, 250);
content.drawImage(c3, 110, 320);
content.restore(); } fps = 0;
//实现动画
function animate(time) { if(!pause){ //清楚背景
content.clearRect(0, 0, canvas.width, canvas.height);
//计算fps
fps = geFps(time); //绘制背景
drawBack(); //绘制即时参数
content.fillText(fps.toFixed() + " fps", 20, 20); }else{ lastFpsUpdateTime=time; }
//继续下一帧动画
requestAnimFrame(animate);
} var lastFpsUpdateTime = 0;
//计算fps
function geFps(time) { fps = 1000 / (time - lastFpsUpdateTime); lastFpsUpdateTime = time; return fps; }
</script>
</head> <body>
<div id="control">
<input id="b1" type="button" value="暂停" /> </div>
<div id="containter">
<canvas id="canavas" width="500" height="200"></canvas>
</div>
</body> </html>
来看效果：