Question

我正在尝试在画布中绘制多个图像。当我加载一个页面它工作（每个图像绘制在正确的位置），我遇到的问题是，当我重新加载页面时，只会绘制1个图像（在它的正确位置）。

代码只是一个for循环，它遍历图像URL数组并确定图像的位置。

当我重新加载页面并且只绘制了1个图像时，该图像恰好是页面标题中的任何图像。如果我转到另一个运行相同代码但具有不同标题图像的页面，它将正确显示所有图像，但是当我重新加载页面时，只有恰好位于标题中的图像才能正确显示。如果我回到第一页，所有图像都会正确显示，如果我重新加载，只会显示标题中的图像。

// Get the image
var image = new Image();
var image_load = function( img, x_pos, y_pos, width, height ) {

    // Draw the image
    context.drawImage( img, x_pos, y_pos, width, height );
};
image.src = image_url[index];
image.onload = image_load( image, x_position, y_position, img_size, img_size );

我确保图片网址都已正确设置并且位置和位置都是正确的。尺寸都是正确的。我注意到的另一件事是，当我突破代码时，image对象始终正确设置outerHTML和src属性，但currentSrc仅设置当图像正确显示时，如果图像没有显示，则设置为""。

我已经玩了好几个小时了，我找不到的在线示例对我有用。任何帮助将不胜感激。

Answer 1

您似乎正在执行image_load函数，而不是将其分配给load事件侦听器。您可以传递一个函数处理程序，以便在事件发生时执行，在您的情况下，您传递的是image_load的结果，您的代码示例为{{1} }。

尝试使用以下代码而不是您的代码：

undefined

请注意，我们正在传递一个函数，该函数在执行时将使用所需的参数调用image.onload = function(){ image_load( image, x_position, y_position, img_size, img_size ); };，而不是在现场执行。

修改如果你对所有处理程序使用相同的变量，那么考虑这样一个事实：加载图像需要时间，在那个时候你可能用新图像细节覆盖了先前定义的参数，可能导致所有图像都接收到来自最后调用定义了这些变量。在这种情况下我会推荐两种解决方案。

包装您的代码，以便每个图像都定义自己的变量。

image_load

请注意，我们通过创建新范围的父函数function createImage(image_url, x_position, y_position, width, height) { var image = new Image(); image.onload = function() { var context; // ... Some code ... // Draw the image context.drawImage( image, x_position, y_position, width, height ); }; image.src = image_url; return image; }传递参数。每个函数执行都有自己独立的范围，值不会混合。

您可以通过这种方式bind事件处理程序的值。

createImage

Bind将返回一个函数版本，该函数自动将其上下文设置为null（函数中的var image = new Image(); var image_load = function( img, x_pos, y_pos, width, height ) { // Draw the image context.drawImage( img, x_pos, y_pos, width, height ); }; image.src = image_url[index]; image.onload = image_load.bind( null, image, x_position, y_position, img_size, img_size );将为null）和前几个参数：this。由于我们将值绑定到函数，即使变量将更改值，也不会对我们的处理程序产生影响。

如果由我决定，我可能会将这两个函数分成如下：

image, x_position, y_position, img_size, img_size

使用function loadImage(x_position, y_position, width, height) { var context; // ... Some code ... // Draw the image context.drawImage(this, x_position, y_position, width, height); } function createImage(image_url, x_position, y_position, width, height) { var image = new Image(); image.onload = loadImage.bind(image, x_position, y_position, width, height); image.src = image_url; return image; }图片作为上下文（loadImage）。

P.S。我在this和image.onload之间切换，在设置源并开始图像下载之前设置事件处理程序是个好主意。

在HTML5画布上绘制多个图像有时不起作用

1 个答案: