Question

标题措辞不够，但没有办法简明地描述问题。我正在将图像绘制到动态创建的画布的2D上下文中。然后通过toDataURL将上下文数据保存到图像中，然后在每个帧上绘制。下面的代码是浓缩的，我将在上下文中绘制多个图像，而不仅仅是一个;这就是为什么我要保存到图像。我只会一次绘制部分图像，但图像保持不变，所以我认为这是最好的方法，如果有其他选择，我会乐意接受这些作为答案。

简而言之：在图像上绘制许多图像。图像的一部分绘制每一帧。以下代码有效：

var picture = new Image();
picture.src = "images/tilesheet.png";
var canvas = document.getElementById("background");
var context = canvas.getContext("2d");
function generate(){
	var ctx = document.createElement("canvas").getContext("2d");
		ctx.canvas.width = canvas.width;
		ctx.canvas.height = canvas.height;
	ctx.fillStyle = "red";	
	ctx.rect (0, 0, 40, 40);
	ctx.fill();
	ctx.drawImage(picture,0,0);
	image = new Image();
	image.src = ctx.canvas.toDataURL("image/png");		
}
function draw(){
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.drawImage(image, 0,0,100,100,0,0,100,100);	
}
function play(){
  generate();
  setInterval(function(){draw();}, 0.0333);
}
window.onload = function(){
	if(picture.complete)play();
	else picture.onload = play;	
}

<canvas id="background"></canvas>

但是，这不是：

window.Game = {};
canvas = document.getElementById("background");
var tilesheet = new Image();
tilesheet.src = "images/tilesheet.png";
(function(){
	function Map(){
		this.width = 2736;
		this.height = 2736;
		this.image = null;
	}
	Map.prototype.generate = function(){
		var ctx = document.createElement("canvas").getContext("2d");
			ctx.canvas.width = this.width;
			ctx.canvas.height = this.height;
		ctx.fillStyle = "red";	
		ctx.rect (0, 0, 40, 40);
		ctx.fill();
		ctx.drawImage(tilesheet,0,0);
		this.image = new Image();
		this.image.setAttribute('crossOrigin', 'anonymous');
		this.image.src = ctx.canvas.toDataURL("image/png");					
	}
	Map.prototype.draw = function(context){													
		context.drawImage(this.image, 0,0, context.canvas.height, context.canvas.height, 0, 0, context.canvas.height, context.canvas.height);			
	}
	Game.Map = Map;
})();
(function(){
	var room = new Game.Map();
	room.generate();
	var draw = function(){
		canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);	
		room.draw(canvas.getContext("2d"));		
	}
	Game.play = function(){setInterval(function(){draw();}, 0.0333);}
})();
window.onload = function(){
	if(tilesheet.complete)Game.play();
	else tilesheet.onload = Game.play;	
}

<canvas id="background"></canvas>

因此，似乎问题在于我正在使用函数对象，但我不确定。我究竟做错了什么？调试控制台中没有错误。

Answer 1

这两个人的执行顺序不同。

第一个：

...
附加image.onload
1. 致电generate()
2. ...

第二个：

...
致电generate()
附加image.onload
1. ...

这就是为什么它不起作用 - generate()期望加载图像，但是第二种情况下订单并不能保证它。

而不是

...
room.generate();
...
Game.play = function(){setInterval(function(){draw();}, 0.0333);}

这样做

...
Game.play = function(){
    room.generate();
    setInterval(function(){draw();}, 0.0333);
}

函数对象无法从画布

1 个答案: