请问为什么JS绘制的动画中会有重影呢，就是类似于该视频中的果实上浮一例。
//-----------------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();
}上面是我的部分代码
后面是我的程序运行的截图
