如果你的代碼和教程一致的話，在畫?？耙惹謇懋嫴?。在

aneObj.prototype.draw = function () {

ctx.clearRect(0,0,畫布寬，畫布高);//加上這個

}

/**

?* ane.js

?*/

var aneObj = function()

{

? ? this.x = [];

? ? this.len = [];

};

aneObj.prototype.num = 50;

aneObj.prototype.init = function () {

? ? for(var i = 0;i<aneObj.num;i++){

? ? ? ? this.x[i] = i * 16 + Math.random()*20;

? ? ? ? this.len[i] = 200 + Math.random()*50;

? ? }

};

aneObj.prototype.draw = function () {

? ? ctx2.save();

? ? ctx2.globalAlpha = 0.6;

? ? ctx2.strokeStyle='#3b154e';

? ? ctx2.lineCap='round';

? ? ctx2.lineWidth = 10;

? ? for(var i = 0;i<50;i++){

? ? ? ? ctx2.beginPath();

? ? ? ? console.log('begin draw');

? ? ? ? ctx2.moveTo(this.x[i],canHeight);

? ? ? ? ctx2.lineTo(this.x[i],canHeight-this.len[i]);

? ? ? ? ctx2.stroke();

? ? ? ? console.log('over draw');

? ? }

? ? ctx1.restore();

};

/**

?* main.js

?*/

document.body.onload = game;

var can1;

var can2;

var ctx1;

var ctx2;

var canWidth;

var canHeight;

var lasttime;

var deltatime;

var bgPic = new Image();

var ane;

var fruit;

function game(){

? ? init();

? ? lasttime = Date.now();

? ? deltatime = 0;

? ? gameloop();

}

function init(){

? ? can1 = document.getElementById('can1');//z-index = 1 最外層 ?魚 ?浮游物 ?ui ?特效

? ? ctx1 = can1.getContext('2d');

? ? can2 = document.getElementById('can2');//背景 ??？??果實(shí)

? ? ctx2 = can2.getContext('2d');

? ? bgPic.src = './src/background.jpg';

? ? canWidth = can1.width;

? ? canHeight = can1.height;

? ? ane = new aneObj();

? ? ane.init();

? ? fruit = new fruitObj();

? ? fruit.init();

? ? console.log("main---fruil.init");

}

function gameloop(){

? ? window.requestAnimationFrame(gameloop);

? ? ? ? var now = Date.now();

? ? ? ? deltatime = now - lasttime;

? ? ? ? lasttime = now;

? ? ? ? drawBackground();

? ? ? ? ane.draw();

? ? ? ? fruit.draw();

}

現(xiàn)在果實(shí)也沒有顯示 ? 搞不明白

gameloop里第一句沒分號，且不同瀏覽器不同對象 ?應(yīng)該這樣寫

window.requestAnimFrame?=?(function(){
????return??window.requestAnimationFrame???????||?
????????????window.webkitRequestAnimationFrame?||?
????????????window.mozRequestAnimationFrame????||?
????????????window.oRequestAnimationFrame??????||?
????????????window.msRequestAnimationFrame?????||?
????????????function(?callback?){
????????????????window.setTimeout(callback,?1000?/?60);//定義每秒執(zhí)行60次動畫
????????????};
})();

這樣還不行的話，只能看你的全部代碼 ?查查看了

設(shè)置canvas畫筆對象屬性要在畫之前，設(shè)置完再畫，才有作用效果的

ctx2.save();
	ctx2.globalAlpha?=?0.6;
	ctx2.strokeStyle?=?"#3b154e";
	ctx2.lineCap?=?"round";
	ctx2.lineWidth?=?20;
	for(var?i?=?0;?i?<?this.num;?i++){
		ctx2.beginPath();
		ctx2.moveTo(this.x[i],?canHeight);
		ctx2.lineTo(this.x[i],?canHeight?-?this.len[i]);
		ctx2.stroke();
	}
	ctx2.restore();