html canvas：將多個圖像插入到單獨的畫布中

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 。

而不是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;
});