我似乎很清楚如何使用JavaScript动态加载和绘制图像。我附加了onload函数并设置了图像源：
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "your_img_path";
我想为2D图像（图块）阵列执行此操作，并多次更新这些图块。但是，如后所述，我遇到了实现此问题的问题。
我编写的功能以及我在下面显示的功能包含一些与我当前问题无关的计算。它们的目的是允许平铺/缩放瓷砖（模拟相机）。选择加载的图块取决于请求呈现的位置。
setInterval(redraw, 35);
function redraw()
{
var canvas = document.getElementById("MyCanvas");
var ctx = canvas.getContext("2d");
//Make canvas full screen.
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
//Compute the range of in-game coordinates.
var lowestX = currentX - (window.innerWidth / 2) / zoom;
var highestX = currentX + (window.innerWidth / 2) / zoom;
var lowestY = currentY - (window.innerHeight / 2) / zoom;
var highestY = currentY + (window.innerHeight / 2) / zoom;
//Compute the amount of tiles that can be displayed in each direction.
var imagesX = Math.ceil((highestX - lowestX) / imageSize);
var imagesY = Math.ceil((highestY - lowestY) / imageSize);
//Compute viewport offsets for the grid of tiles.
var offsetX = -(mod(currentX, imageSize) * mapZoom);
var offsetY = -(mod(currentY, imageSize) * mapZoom);
//Create array to store 2D grid of tiles and iterate through.
var imgArray = new Array(imagesY * imagesX);
for (var yIndex = 0; yIndex < imagesY; yIndex++) {
for (var xIndex = 0; xIndex < imagesX; xIndex++) {
//Determine name of image to load.
var iLocX = (lowestX + (offsetX / mapZoom) + (xIndex * imageSize));
var iLocY = (lowestY + (offsetY / mapZoom) + (yIndex * imageSize));
var iNameX = Math.floor(iLocX / imageSize);
var iNameY = Math.floor(iLocY / imageSize);
//Construct image name.
var imageName = "Game/Tiles_" + iNameX + "x" + iNameY + ".png";
//Determine the viewport coordinates of the images.
var viewX = offsetX + (xIndex * imageSize * zoom);
var viewY = offsetY + (yIndex * imageSize * zoom);
//Create Image
imgArray[yIndex * imagesX + xIndex] = new Image();
imgArray[yIndex * imagesX + xIndex].onload = function() {
ctx.drawImage(imgArray[yIndex * imagesX + xIndex], viewX, viewY, imageSize * zoom, imageSize * zoom);
};
imgArray[yIndex * imagesX + xIndex].src = imageName;
}
}
}
如您所见，函数中声明的数组等于显示的切片网格的大小。数组的元素表面上填充了动态加载后绘制的图像。不幸的是，我的浏览器认为imgArray[yIndex * imagesX + xIndex]不是图像，我收到错误：
未捕获的TypeError：无法执行＆＃39; drawImage＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：提供的值不是＆＃39;（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap）＆＃39;
另外，我原本以为阵列不是必需的。毕竟，如果我在下次调用redraw时要加载一个新图像，为什么我需要在完成图像处理后保留图像处理？在这种情况下，循环看起来像这样：
for (var yIndex = 0; yIndex < imagesY; yIndex++) {
for (var xIndex = 0; xIndex < imagesX; xIndex++) {
//Determine name of image to load.
var iLocX = (lowestX + (offsetX / mapZoom) + (xIndex * imageSize));
var iLocY = (lowestY + (offsetY / mapZoom) + (yIndex * imageSize));
var iNameX = Math.floor(iLocX / imageSize);
var iNameY = Math.floor(iLocY / imageSize);
//Construct image name.
var imageName = "Game/Tiles_" + iNameX + "x" + iNameY + ".png";
//Determine the viewport coordinates of the images.
var viewX = offsetX + (xIndex * imageSize * zoom);
var viewY = offsetY + (yIndex * imageSize * zoom);
//Create Image
var img = new Image();
img.onload = function() {
ctx.drawImage(img, viewX, viewY, imageSize * zoom, imageSize * zoom);
};
img.src = imageName;
}
}
自从上次处理过的瓷砖渲染以来，我对此方法运气更好。尽管如此，所有其他瓷砖都没有画出来。我想我可能一直在覆盖事物，只有最后一个保留了它的价值。
那么，我该怎样做才能重复渲染瓷砖的2D网格，以便瓷砖一直在加载？
为什么数组元素不被视为图像？
答案 0 :(得分：2)
您已经犯了所有JavaScript程序员在某个时间制作的经典错误。问题出在这里：
imgArray[yIndex * imagesX + xIndex].onload = function() {
ctx.drawImage(imgArray[yIndex * imagesX + xIndex], viewX, viewY, imageSize * zoom, imageSize * zoom);
};
您在循环中定义一个函数，并期望每个函数都有自己的变量副本。那不是发生了什么。您定义的每个函数都使用相同的变量yIndex，xIndex，viewX和viewY。请注意，函数使用这些变量，而不是这些变量的值。
这非常重要：您在循环中定义的函数在您使用时不使用yIndex（以及xIndex，viewX，viewY）的值定义了这个功能。函数使用变量本身。每个函数在执行函数时评估yIndex（和xIndex以及其余函数）。
我们说这些变量已绑定在closure中。当循环结束时，yIndex和xIndex超出范围，因此函数会计算超出数组末尾的位置。
解决方案是编写另一个函数，将yIndex，xIndex，viewX和viewY传递给它，并生成一个捕获值的新函数你想用。这些值将存储在与循环中的变量分开的新变量中。
您可以在循环之前将此函数定义放在redraw()中：
function makeImageFunction(yIndex, xIndex, viewX, viewY) {
return function () {
ctx.drawImage(imgArray[yIndex * imagesX + xIndex], viewX, viewY, imageSize * zoom, imageSize * zoom);
};
}
现在通过调用函数制作函数替换有问题的行：
imgArray[yIndex * imagesX + xIndex].onload = makeImageFunction(yIndex, xIndex, viewX, viewY);
另外，请确保您正确设置正确图像的来源：
imgArray[yIndex * imagesX + xIndex].src = imageName;
为了使您的代码更易于阅读和更易于维护，请重复计算yIndex * imagesX + xIndex。最好一次计算图像索引并在任何地方使用它。
您可以这样简化makeImageFunction：
function makeImageFunction(index, viewX, viewY) {
return function () {
ctx.drawImage(imgArray[index], viewX, viewY, imageSize * zoom, imageSize * zoom);
};
}
然后在循环中写下这个：
// Create image.
var index = yIndex * imagesX + xIndex;
imgArray[index] = new Image();
imgArray[index].onload = makeImageFunction(index, viewX, viewY);
imgArray[index].src = imageName;
您可能也希望将imgArray[index]分解出来：
// Create image.
var index = yIndex * imagesX + xIndex;
var image = imgArray[index] = new Image();
image.onload = makeImageFunction(index, viewX, viewY);
image.src = imageName;
此时我们问自己为什么我们有一个图像阵列。如果你正如你在问题中所说的那样，一旦你加载了图像就没有使用数组，我们可以完全摆脱它。
现在我们传递给makeImageFunction的论点是图片：
function makeImageFunction(image, viewX, viewY) {
return function () {
ctx.drawImage(image, viewX, viewY, imageSize * zoom, imageSize * zoom);
};
}
在循环中我们有：
// Create image.
var image = new Image();
image.onload = makeImageFunction(image, viewX, viewY);
image.src = imageName;
这看起来类似于您在问题中提到的替代方案，除了它在循环内没有函数定义。相反，它调用函数制作函数，该函数在新函数中捕获image，viewX和viewY的当前值。
现在，您可以找出原始代码仅绘制最后一张图像的原因。你的循环定义了一大堆所有引用变量image的函数。当循环结束时，image的值是您制作的最后一张图像，因此所有函数都指向最后一张图像。因此，他们都绘制了相同的图像。他们将它绘制在同一个位置，因为所有这些变量都使用相同的变量viewX和viewY。
答案 1 :(得分：2)
Michael Laszlo提供了一个很好的答案，但我想在这种情况下添加它，因为这是关于具有特殊注意事项的图形应用程序。
更新画布的内容时，应将其全部保存在一个函数中。当所有其他页面布局和渲染完成时，应该调用该函数。此功能的调用次数不应超过每秒60次。以广告方式访问画布很麻烦，会使整个页面变慢。
浏览器提供了一种方法，用于确保画布重绘的时间与其自身的布局和渲染同步。 window.requestAnimationFrame (renderFunction);见https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
不需要为每个图像添加onload事件，这是浪费资源。您只需将图像添加到数组中，然后在每个动画帧上检查是否已加载数组中的图像，方法是检查每个图像的complete属性。
我假设瓷砖是背景的一部分，所以只需要渲染一次。最好创建一个离页画布对象并将其渲染到它，然后将该画布渲染到用户看到的页面画布上。
... // all in scope of your game object
// create a background canvas and get the 2d context
function setup(){
// populate your imageArray with the image tiles
// Now call requestAmimationFrame
window.requestAnimationFrame(myRenderTileSetup);
}
function myRenderTileSetup(){ // this renders the tiles as they are avalible
var renderedCount = 0;
for(y = 0; y < tilesHeight; y+=1 ){
for(x = 0; x < tilesWidth; x+=1 ){
arrayIndex = x+y*tilesWidth;
// check if the image is available and loaded.
if(imageArray[arrayIndex] && imageArray[arrayIndex].complete){
backGroundCTX.drawImage(imageArray[arrayIndex],... // draw the image
imageArray[arrayIndex] = undefined; // we dont need the image
// so unreference it
}else{ // the image is not there so must have been rendered
renderedCount += 1; // count rendered tiles.
}
}
}
// when all tiles have been loaded and rendered switch to the game render function
if(renderedCount === tilesWidth*tilesHeight){
// background completely rendered
// switch rendering to the main game render.
window.requestAnimationFrame(myRenderMain);
}else{
// if not all available keep doing this till all tiles complete/
window.requestAnimationFrame(myRenderTileSetup);
}
}
function myRenderMain(){
... // render the background tiles canvas
... // render game graphics.
// now ready for next frame.
window.requestAnimationFrame(myRenderMain);
}
这只是一个示例，显示了瓷砖的渲染以及我如何想象您的游戏功能而不是功能代码。此方法简化了渲染过程，仅在需要时才执行此操作。它还通过不以add hock（Image.onload）方式调用draw函数，将GPU（图形处理单元）状态更改保持在最低限度。
它还消除了为每个平铺图像添加onload函数的需要，这本身就是额外的开销。如果Michael Laszlo建议您为每个图像添加新函数，则如果不删除图像引用或onload属性引用的函数，则可能存在内存泄漏的风险。最好尽量减少与DOM和DOM对象的所有交互，例如HTMLImageElement，如果不需要，总是确保你去除它们，这样它们就不会浪费内存。
requestAnimationFrame也会停止被调用，从而允许设备上的其他进程有更多的CPU时间，从而更加用户友好。
编写游戏需要仔细考虑性能，并且每一点都有帮助。