我们都知道传统的js控制div的滚动
其实用canvas也一样可以实现
效果如下
代码如下
<!DOCTYPE html>
<html>
<head>
<title>背景滚动</title>
<meta charset="utf-8">
<style>
body {
background: #dddddd;
}
#canvas {
position: absolute;
top: 30px;
left: 10px;
background: #ffffff;
cursor: crosshair;
margin-left: 10px;
margin-top: 10px;
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
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 not supported
</canvas>
<input id='animateButton' type='button' value='Animate'/>
<script src='./js/requestNextAnimationFrame.js'></script>
</body>
</html>
<script type="text/javascript">
var canvas=document.getElementById("canvas")
var context=canvas.getContext("2d")
var animateButton=document.getElementById("animateButton")
var sky=new Image()
var person=new Image()
var paused=true
var lastTime=0
var fps=0
var skyOffset=0
var skyOffset1=500
var SKY_VELOCITY=30
function erase(){
context.clearRect(0,0,canvas.width,canvas.height)
}
function getfps(){
var now=(+new Date)
fps=1000/(now-lastTime)
lastTime=now
return fps
}
function draw(){
context.save()
skyOffset=skyOffset>canvas.width?0:skyOffset+SKY_VELOCITY/getfps()
context.translate(skyOffset,0)
context.drawImage(sky,0,0,canvas.width,canvas.height)
context.drawImage(sky,-canvas.width+2,0,canvas.width,canvas.height)
context.restore()
context.save()
skyOffset1=skyOffset1-3
if(skyOffset1<-144){skyOffset1=canvas.width-144}
context.translate(0,0)
context.drawImage(person,skyOffset1,50)
context.drawImage(person,canvas.width+skyOffset1,50)
context.restore()
}
sky.src="./images/hover2.png"
person.src="./images/hover1.png"
window.onload=function(){
draw()
}
function animate(){
if(paused){
erase()
draw()
}
requestNextAnimationFrame(animate)
}
window.requestNextAnimationFrame(animate)
animateButton.onclick=function(){
paused=!paused
}
</script>
