请问为什么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();
}

上面是我的部分代码

后面是我的程序运行的截图