【发布时间】：2019-03-18 16:38:20
【问题描述】：
这是关于创建平铺地图（64x64 像素 PNG）。
出于演示目的，我简化了代码并将网格缩小为 3x3 字段。
问题本质上是当我绘制网格时图像仍在加载，因此第一次加载时画布不会显示。然而，在刷新时，网格加载正常，因为所有图像文件现在都被缓存了。
<body>
<canvas id="canvas" width="200px" height="200px"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 3X3 GRID
var mapArray=[
["tile1","tile3","tile1"],
["tile1","tile1","tile2"],
["tile3","tile1","tile2"]
];
var tile1 = new Image();
var tile2 = new Image();
var tile3 = new Image();
tile1.src='../images/test/tile1.png';
tile2.src='../images/test/tile2.png';
tile3.src='../images/test/tile3.png';
var posX=0;
var posY=0;
for(var i=0; i < mapArray.length; i++) {
for(var j=0; j < mapArray[i].length; j++) {
switch(mapArray[i][j]) {
case "tile1":
context.drawImage(tile1, posX, posY, 64, 64);
break;
case "tile2":
context.drawImage(tile2, posX, posY, 64, 64);
break;
case "tile3":
context.drawImage(tile3, posX, posY, 64, 64);
break;
}
posX+=64;
}
posX=0;
posY+=64;
}
</script>
</body>
可以找到类似的问题：
Canvas image not displaying until second attempt
Why do my canvases only load on refresh?
在这种情况下，虽然我试图生成的不仅仅是一张图像，而是一张图像网格，而我试图解决这个问题的尝试似乎遇到了问题，因为根本没有加载任何内容：
<body>
<canvas id="canvas" width="200px" height="200px"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 3X3 GRID
var mapArray=[
["tile1","tile3","tile1"],
["tile1","tile1","tile2"],
["tile3","tile1","tile2"]
];
var tile1 = new Image();
var tile2 = new Image();
var tile3 = new Image();
var posX=0;
var posY=0;
for(var i=0; i < mapArray.length; i++) {
for(var j=0; j < mapArray[i].length; j++) {
switch(mapArray[i][j]) {
case "tile1":
//use onload so drawing waits until image file is loaded
tile1.onload = function() {
//draw image
context.drawImage(tile1, posX, posY, 64, 64);
};
//load image file
tile1.src='../images/test/tile1.png';
break;
case "tile2":
tile2.onload = function() {
context.drawImage(tile2, posX, posY, 64, 64);
};
tile2.src='../images/test/tile2.png';
break;
case "tile3":
tile3.onload = function() {
context.drawImage(tile3, posX, posY, 64, 64);
tile3.src='../images/test/tile3.png';
break;
}
posX+=64;
}
posX=0;
posY+=64;
}
</script>
</body>
如您所见，我的 3 个开关选项现在都在等待图像加载后再绘制。
我在某处读到它可能与 FOR 循环有关，我必须使用 IIFE，我在这里找到了更多信息： What is the (function() { } )() construct in JavaScript? 但是，我完全不熟悉这个术语/概念，也不知道我是否走在正确的轨道上。
我还尝试通过外部 js 加载它，然后在 body 标记中加载 onload="drawTileMap()" ，但这会引发更有趣的行为，因为它似乎真的加载随机图块而不是整个网格.
非常感谢任何帮助！
【问题讨论】：
标签： javascript html canvas html5-canvas drawimage