1. 首先有一个loadImage.js
代码如下:
function loadImage(imgUrl,fn){
var imgObj = {};
var tempImg,load = 0, imgLength = 0;
for(var key in imgUrl){
imgLength++;
tempImg = new Image();
tempImg.onload = function () {
load++;
if( load >= imgLength){
fn( imgObj );
}
};
tempImg.src = imgUrl[key];
imgObj[key] = tempImg;
}
}
2. 使画布开始动起来,也就是背景图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="cvs" height="500" width="500"></canvas>
</body>
<script src="js/loadImage.js"></script>
<script>
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext("2d");
function Sky( ctx, img, speed) {
//debugger;
this.ctx = ctx;
this.img = img;
this.speed = speed || 2;
/*创建一个实例,length就自增*/
Sky.len++;
console.log(Sky.len);
this.width = this.img.width;
//console.log(this.width);
this.height = this.img.height;
/*根据背景数量,动态计算起始的x轴坐标*/
this.x = this.width * ( Sky.len - 1 );
//console.log(this.x);
//this.x = 0;
this.y = 0;
}
/*sky实例默认的数量*/
Sky.len = 0;
/*给原型扩充方法*/
Sky.prototype = {
constructor: Sky,
draw: function () {
this.ctx.drawImage(this.img, this.x, this.y);
}
}
</script>
<script>
loadImage({
bird: './images/bird.png',
land: './images/land.png',
pipeDown: './images/pipeDown.png',
pipeDown: './images/pipeDown.png',
sky: './images/sky.png'
},function ( imgObj) {
/*根据背景的大小设置画布的大小*/
cvs.width = imgObj.sky.width;
cvs.height = imgObj.sky.height;
var sky = new Sky(ctx, imgObj.sky,10);
var sky2 = new Sky(ctx, imgObj.sky,10);
setInterval(function () {
sky.draw();
sky.x -= sky.speed;
//console.log(sky.x);
if( Math.abs(sky.x) >= sky.width){
sky.x += sky.width *2;
}
sky2.draw();
sky2.x -= sky2.speed;
if( Math.abs(sky2.x) >= sky2.width){
sky2.x += sky2.width *2;
}
},100);
})
</script>
</html>
结果如图所示:(背景图片是运动的)
