javascript - html画布：将多个图像插入单独的画布

Question

我有多个画布，每个画布都有用于检索 dataURL 的 data-id 属性，以便像这样绘制图像：

<canvas data-id='2' class='drawing-result>

以下只会将它们全部放在最后一个画布中：

var $canvases = $(".drawing-result");
for (var i=0; i<$canvases.length; i++){
  var canvas = $canvases.get(i);
  var context = canvas.getContext('2d');
  var imageObj = new Image();
  imageObj.onload = function(){
    context.drawImage(this, 0, 0);
  };
  // skipping the code for retrieving dataURL using data-id
  imageObj.src = dataURL;

我怀疑这可能与浅拷贝某些东西有关，但事实并非如此，因为我将 var 放在任何地方。

Answer 1

JavaScript 的var变量声明是函数范围的，而不是块范围的。context每次循环运行时都会覆盖您的内容。

代替那个 for 循环，使用 jQuery 的.each()函数：

$(".drawing-result").each(function (i, canvas) {
  var context = canvas.getContext('2d');
  var imageObj = new Image();
  imageObj.onload = function(){
    context.drawImage(this, 0, 0);
  };
  // skipping the code for retrieving dataURL using data-id
  imageObj.src = dataURL;
});