在画布上绘制一堆图像答案

【问题标题】：drawing a bunch of images on the canvas在画布上绘制一堆图像
【发布时间】：2013-07-03 23:29:50
【问题描述】：

我有 8 张大小为 80 KB 的图像，我使用循环将它们绘制在画布上。有时并非所有这些都被绘制。可能是什么原因？

ctx 工作量太大？

// img[] containing single image.src

var x = 0;
var y = 0;
var width = 10;
var height = 10;

for( var i = 0; i< 8 ; i++){

 ctx.drawImage(img[i], x + 10 * i, y + 10 * i, width, height);

}

【问题讨论】：

页面加载时是否运行？在将图像绘制到画布上之前，您需要确保已加载图像。
你能发布你所有的代码吗？
为了让您的问题可以回答，您需要提供示例代码。例如，您可以使用 jsfiddle。你所拥有的没有提供任何信息。我的疯狂猜测是，您必须等待图像完成加载才能绘制它们。
我希望您只看到最后绘制的图像，因为您从不更改目标坐标。
这是一个巨大的应用程序的一部分，很抱歉发布伪代码

标签： javascript html canvas

【解决方案1】：

您是否正在更新x、y、position 和height？如果没有，您可能会在图像上绘制，这会使某些图像看起来没有出现。但是，您应该发布更多信息，例如显示的图像数量、用于绘制图像的整个函数以及您的尝试外观的屏幕截图。这样，我们可以更有效地帮助您

【讨论】：

以上不是答案。这是一条评论。
根据您更新它的方式，我会说您的问题是您在更改图像时没有更新变量。对于每个图像，您将拥有 x = 0、y = 0、width = 10 和 height = 10。您应该创建一个 image 对象来保存每个图像的坐标，并在循环遍历数组时引用它们。前任。 ctx.drawImage(img[i], img[i].x, img[i].y, img[i].width, img[i].height)
@akonsu，它最接近我能做出的答案。我没有足够的代表来评论其他人的帖子，我只是想帮助这个人

【解决方案2】：

确保图片已加载。像这样的东西（未测试）：

var urls = [...];

for (var i = 0; i < urls.length; i++) {
    var image = new Image();

    image.src = urls[i];
    image.onload = function () {
        context.drawImage(this, ..., ..., this.width, this.height);
    }
}

【讨论】：

我有一个 onload 函数，然后数组被 img.src 填充
好的。对不起。我没有更多的想法了。我需要查看代码以获得更多想法。 :)

【解决方案3】：

我的服务器出错了，抱歉各位。

【讨论】：