點擊這裡查看效果
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>