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