javascript - html Canvas : insert multiple images into separate canvas

Question

我有多个 Canvas ，每个 Canvas 都有 data-id 属性，用于检索 dataURL 以便绘制图像，如下所示:

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

以下只会将它们全部放在最后一个 Canvas 中:

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 变量声明是函数作用域，而不是 block 作用域。每次循环运行时，您的上下文都会被覆盖。

使用 jQuery 的 .each() 代替 for 循环功能:

$(".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;
});