Question

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

<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都会被覆盖。

使用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;
});

html canvas：将多个图像插入到单独的画布中

1 个答案: