请问为什么JS绘制的动画中会有重影呢。

Question

//-----------------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();
}

上面是我的部分代码

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

找问题找了很久了，但是一直没有发现，请大家帮帮忙，感激不尽！

Answer 1

已经自己解决啦  谢谢

Answer 2

是不是每画一帧就应该将原有的图像清除掉才行啊，而且我这样一直画也会导致内存泄漏吧。就是不知道怎么实现，请问有前辈可以指点我一下吗

Answer 3

请问有前辈指导一下么   我在线等   不然课题没法往下做啦   非常感谢