5.7_背景的滾動
![遊戲背景圖]()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景的滾動</title>
<style>
body{
background: #ddd;
}
#canvas{
position: absolute;
top: 30px;
left: 10px;
background: #FFFFFF;
cursor: crosshair;
margin-left: 10px;
margin-top: 10px;
box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
input{
margin-left: 15px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1024" height="512"></canvas>
<input id="animateButton" type="button" value="Animate" />
</body>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var animateButton = document.getElementById('animateButton');
var sky = new Image();
var paused = true;
var lastTime = 0;
var fps = 60;
var skyOffset = 0;
var skyVelocity = 100;
sky.src = 'img/bg.png';
sky.onload = function(e){
draw();
};
requestAnimationFrame(animate);
animateButton.onclick = function (){
paused = !paused;
if(paused){
animateButton.value = 'Animate';
}else{
animateButton.value = 'Pause';
}
}
function draw(){
context.save();
skyOffset = skyOffset<canvas.width? skyOffset+skyVelocity/fps:0;
context.translate(-skyOffset,0);
context.drawImage(sky,0,0,canvas.width,canvas.height);
context.drawImage(sky,canvas.width,0,canvas.width,canvas.height);
context.restore();
};
function erase(){
context.clearRect(0,0,canvas.width,canvas.height);
}
function calculateFps(now){
var fps = 1000/(now - lastTime);
lastTime = now;
return fps;
}
function animate(now){
fps = calculateFps(now);
if(!paused){
erase();
draw();
}
requestAnimationFrame(animate);
}
</script>
</html>
