时间戳

首页 > 解决方案 > 如何使用单个函数在画布上绘制多个图像？

javascript - 如何使用单个函数在画布上绘制多个图像？

问题描述

我正在尝试将多个图像绘制到 HTML Canvas 元素上。

assetData是一个对象数组，每个对象都包含从数据库中获取的将图像写入画布所需的数据。至关重要的是，assetData它可以是任意长度：它可以包含一个图像，也可以包含 100 个。

下面的代码不起作用，因为gfxCtx.drawImage()多次绘制数组中指定的最终图像，而不是每个单独的图像。

for(var x = 0; x < assetData.length; x++) {
  var layer = eval(assetData[x])
  var gfx = new Image
  gfx.src = "images/" + layer.src
  gfx.onload = function() {
    gfxCtx.drawImage(gfx, layer.x, layer.y, layer.w, layer.h)
    compile()
  }
}

compile()处理将图像绘制到画布上

如果要绘制固定数量的图像，我会将每个图像分配给一个单独的变量。然而，在这种情况下，我不一定知道要绘制多少张图像，并且我想保持代码相当简洁。

这个问题有干净、直接的解决方案吗？

谢谢！

标签： javascriptcanvas

解决方案

要解决此问题，请考虑forEach()在阵列上使用该方法，而不是像当前那样assetData使用常规循环。for

这必须为每个循环迭代创建一个独特的“闭包”，这反过来又允许您根据需要将每个独特的图像正确地绘制到画布中：

assetData.forEach(function(assetItem) {

  // This function has a unique closure which
  // allows you to draw the current assetItem
  // to the canvas to achieve the desired result
  var layer = eval(assetItem);
  var gfx = new Image();
  gfx.src = "images/" + layer.src;
  gfx.onload = function() {

    gfxCtx.drawImage(gfx, layer.x, layer.y, layer.w, layer.h);
    compile();
  }

});

推荐阅读