javascript - 在画布上绘制一堆图像

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

我的服务器出错了，对不起各位。

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

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