Question

我正在使用Pixel Grid Canvas在Javascript中绘制内容。我得到了应有的一切，但仅限于Firefox，它只在刷新页面后才能运行。

我的问题是：为什么这只会在刷新后提供正确的输出，我该怎么做才能让它在第一次尝试时有正确的输出。

function PixelGridCanvas(){
	this.init = function(canvas, ps, gs, pc, gc){
		this.ctx = canvas.getContext("2d");
		this.pixelSize = ps;
		this.gridSize = gs;
		
		this.gridWidth = canvas.width/ps;
		this.gridHeight =  canvas.height/ps;
		
		if(this.gridWidth <= 1) this.gridWidth = 1;
		if(this.gridHeight <= 1) this.gridHeight = 1;
		
		this.pixelColor = pc;
		this.gridColor = gc;
	};
	
	this.clearCanvas = function(){
			
			this.ctx.fillStyle = this.pixelColor;
			this.ctx.fillRect(0,0, (this.gridWidth * this.pixelSize) - this.pixelSize, (this.gridHeight * this.pixelSize) - this.pixelSize);
			
			this.ctx.fillStyle = this.gridColor;
			var drawLine = false;
			
			for(var i = 0; i < this.gridWidth * 2; i++){
				if(drawLine) this.ctx.fillRect(i * this.pixelSize,0, this.pixelSize, ((this.gridHeight * this.pixelSize) * 2) + this.pixelSize);
				drawLine = !drawLine;
			}
			
			var drawLine = false;
			for(var i = 0; i < this.gridHeight * 2; i++){
				if(drawLine) this.ctx.fillRect(0,i * this.pixelSize, ((this.gridWidth * this.pixelSize) * 2) - this.pixelSize, this.pixelSize);
				drawLine = !drawLine;
			}
	};
	
	this.drawImageAt = function(src, destx, desty){
		console.log("drawImage");
		var img = new Image();
		img.src = src;
		var icanvas = document.createElement('canvas');
		icanvas.width = img.width;
		icanvas.height = img.height;
		var ictx = icanvas.getContext('2d');
		ictx.drawImage(img, 0, 0, img.width, img.height);
		
		for(var x = 0; x < icanvas.width; x++){
			for(var y = 0; y < icanvas.height; y++){
				
				//console.log("pixel");
				
				var pixel = ictx.getImageData(x, y, 1, 1);
				var data = pixel.data;
				var rgba = 'rgba(' + data[0] + ',' + data[1] +
							 ',' + data[2] + ',' + data[3] + ')';
							 
				this.ctx.fillStyle = rgba;
				this.ctx.fillRect((destx * this.pixelSize) + (x * this.pixelSize) + (x * this.pixelSize), (desty * this.pixelSize) + (y * this.pixelSize) + (y * this.pixelSize), this.pixelSize, this.pixelSize);
				
			}
		}
	};
	
	this.drawImage = function(src){
		this.drawImageAt(src,0,0);
	};
}

<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
	<script src="js/pgc/main.js"></script>
	
	<script>
	$( document ).ready(function() {
		var c = document.getElementById("myCanvas");
		var pgc = new PixelGridCanvas();
		pgc.init(c, 2, 2, "#eeeeee", "#ffffff");
		
		pgc.clearCanvas();
		pgc.drawImage("imgs/test1.png");
		
		pgc.drawImageAt("imgs/test1.png", 50,50);
	});
	</script>
		
	</head>
	<body>
		<canvas id="myCanvas" width="320" height="320"></canvas>
		
		
	</body>
</html>

以下是我个人网站上运行的链接： http://pgc.00ffff3.com/

编辑：

将draw函数包含在图像的onload中，但它仍然做同样的事情。我理解这个错误吗？

this.drawImageAt = function(src, destx, desty){
		console.log("drawImage");
		var img = new Image();
		
		img.onload = function () {
			var icanvas = document.createElement('canvas');
			icanvas.width = img.width;
			icanvas.height = img.height;
			var ictx = icanvas.getContext('2d');
			ictx.drawImage(img, 0, 0, img.width, img.height);
			
			for(var x = 0; x < icanvas.width; x++){
				for(var y = 0; y < icanvas.height; y++){
					
					//console.log("pixel");
					
					var pixel = ictx.getImageData(x, y, 1, 1);
					var data = pixel.data;
					var rgba = 'rgba(' + data[0] + ',' + data[1] +
								 ',' + data[2] + ',' + data[3] + ')';
								 
					this.ctx.fillStyle = rgba;
					this.ctx.fillRect((destx * this.pixelSize) + (x * this.pixelSize) + (x * this.pixelSize), (desty * this.pixelSize) + (y * this.pixelSize) + (y * this.pixelSize), this.pixelSize, this.pixelSize);
					
				}
			}
		}
		
		img.src = src;
	};

Answer 1

主要原因是因为图像加载是异步的，所以为了使代码工作，必须在尝试绘制图像之前加载图像。您可以在JS中预加载图像，然后在所有图像加载成功时触发{{1}}方法。

异步加载问题

1 个答案: