                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /HTML5小游戏---爱心鱼（上）

canvas画背景的一个问题

var can1;
var can2;

var ctx1;
var ctr2;

var lastTime;
var daltaTime;

var canWidth;
var canHeight;

var bgPic = new Image();
document.body.onload = game;
function game(){
	init();
	lastTime = Date.now();
	daltaTime = 0;
	//gameloop();
}
function init(){
	can1 = document.getElementById("canvas1");
	ctx1 = can1.getContext('2d');

	can2 = document.getElementById("canvas2");
	ctx2 = can2.getContext('2d');

	bgPic.src = "./src/background.jpg";

	canWidth = can1.width;
	canHeight = can1.height;
	ctx2.drawImage(bgPic, 0, 0, canWidth, canHeight);
}

我想在调用init方法的时候画，为什么会画不出来

taba

2017-03-26

源自：HTML5小游戏---爱心鱼（上） 2-1

关注问题我要回答

1213

操作

收起

1 回答

qq_风龙_0
2017-03-26

增加图片加载监听（等待图片加载完），加上bgPic.onload=function(){ctx2.drawImage(bgPic, 0, 0, canWidth, canHeight);}要不就增加页面自动刷新函数，使用setInterval或者requestAnimationFrame，不断调用game函数,但不能使用两者一起使用，会不显示（估计是不断刷新，不断等待图片加载造成图片永远加载中而不显示）