HTML畫布：插入多個圖像到單獨的畫布

Question

我有多個畫布，各與用於檢索dataURL以繪製圖像等，以便數據-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; 

我懷疑它可能與淺拷貝做一些事情，但不能是這樣，因爲我把變種無處不在。

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