//-----------------train.js----------------------------------
var?trainObj=function(){
????this.x=[];
????this.y=[];
????this.alive=[];//bool
????this.ifrun=[];
????this.ifturn=[];
????this.open=new?Image();
????this.close=new?Image();
}
trainObj.prototype.num=1;
trainObj.prototype.init=function(){
????for(var?i=0;i<this.num;i++){
????????this.x[i]=50;
????????this.y[i]=250;
????????this.alive[i]=false;
????????this.ifrun[i]=true;
????????this.ifturn[i]=false;
????????this.open.src="./src/trains.png";
????????this.close.src="./src/trains.png";
????}
????console.log("火車初始化完成");
}
trainObj.prototype.draw=function(){
????for(var?i=0;i<this.num;i++){
????????if(this.ifrun[i]==true){
????????????if(this.ifturn[i]==true){
?
????????????}else{
????????????????this.x[i]+=0.1*deltaTime;
????????????}
????????}
????????ctx1.drawImage(this.close,this.x[i],this.y[i]);
????}
}
//---------------------main.js-----------------------------
var?can1;
var?can2;
var?ctx1;
var?ctx2;
var?lastTime;
var?deltaTime;
var?globW,globH;
var?train;
document.body.onload=game;
function?game(){
????init();
????lastTime=Date.now();
????deltaTime=0;
????gameloop();
}
function?init(){
????//獲得canvas?context
????can1=document.getElementById("canvas1");//繪制紅綠燈?UI??火車??文本框
????ctx1=can1.getContext('2d');
????can2=document.getElementById("canvas2");//繪制背景??軌道
????ctx2=can2.getContext('2d');
????globW=can1.width;
????globH=can1.height;
????train=new?trainObj();
????train.init();
????console.log("初始化完成");
}
function?gameloop(){
????window.requestAnimFrame(gameloop);//setInterval,setTimeout,fps
????var?now=Date.now();
????deltaTime=now-lastTime;
????lastTime=now;
????console.log(deltaTime);
????background();
????train.draw();
}上面是我的部分代碼后面是我的程序運(yùn)行的截圖找問(wèn)題找了很久了，但是一直沒(méi)有發(fā)現(xiàn)，請(qǐng)大家?guī)蛶兔?，感激不盡！
請(qǐng)問(wèn)為什么JS繪制的動(dòng)畫中會(huì)有重影呢。
firmthinking
2016-02-17 00:02:08
