请问为什么JS绘制的动画中会有重影呢,就是类似于该视频中的果实上浮一例。

来源:2-5 果实绘制(果实上浮)

firmthinking

2016-02-16 23:48

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

上面是我的部分代码

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

http://img.mukewang.com/56c344220001a97007160175.jpg

写回答 关注

1回答

  • firmthinking
    2016-02-18 15:10:14

    自己已经解决啦    谢谢

    小白白很黑 回复firmth...

    可是擦除会把背景的蓝色也给擦了呀

    2018-05-31 19:42:35

    共 3 条回复 >

HTML5小游戏---爱心鱼(上)

学做HTML5游戏,轻轻松松带你上手,适合刚入手游戏开发的同学

92348 学习 · 551 问题

查看课程

相似问题