亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

請問為什么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();
}

上面是我的部分代碼

后面是我的程序運行的截圖

http://img1.sycdn.imooc.com//56c344220001a97007160175.jpg

正在回答

1 回答

自己已經解決啦 ? ?謝謝

0 回復 有任何疑惑可以回復我~
#1

jasonlbw

你咋解決重影的問題的?
2016-04-04 回復 有任何疑惑可以回復我~
#2

firmthinking 提問者 回復 jasonlbw

在循環函數中,利用clearRect函數對已經畫布已經繪制過的區域進行擦除。
2016-04-15 回復 有任何疑惑可以回復我~
#3

小白白很黑 回復 firmthinking 提問者

可是擦除會把背景的藍色也給擦了呀
2018-05-31 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

請問為什么JS繪制的動畫中會有重影呢,就是類似于該視頻中的果實上浮一例。

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號