在画布上绘制一堆图像

Question

我有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);

}

Answer 1

您是否要更新x ， y ， position和height ？ 如果没有，您可能正在绘制图像，这会使图像看起来好像没有出现。 但是，您应该发布更多信息，例如显示多少图像，用来绘制图像的整个功能以及尝试画面的屏幕快照。 这样，我们可以更有效地帮助您

Answer 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);
    }
}

Answer 3

抱歉，我的服务器上有一个错误。