Question

我用jquery动态创建li元素。这是我的代码

for ( i = 0; i < 100; i++) {
    $("#sortable").append("<li style='width:"+Size+"px;height:"+Size+"px;' class='ui-state-default' id="+"Image" + i + ">" + "IMAGE" + i + "</li>");
}

现在我想在每个li元素中添加带有canvas的图像，并使用canvas再次写入一些文本。有可能吗？

这是我到目前为止编写的代码，但它只将图像添加到最后一个li元素

for ( i = 0; i < 100; i++) {
    var canvas1 = document.getElementById('canvas'+i).getContext("2d");
    var img = new Image();
    img.src = "/img/test.png";
    img.onload = function() {
      canvas1.drawImage(img, 0, 0,Size,Size);
     };
}

Answer 1

关闭应该可以解决问题：

for ( i = 0; i < 100; i++) {
    (function(i){   //added line
        var canvas1 = document.getElementById('canvas'+i).getContext("2d");
        var img = new Image();
        img.src = "/img/test.png";
        img.onload = function() {
            canvas1.drawImage(img, 0, 0,Size,Size);
        };
    })(i);   //added line
}

事情是，.onload事件将被触发，for循环将结束，img将仅引用最后一个Image对象。通常，如果使用var定义变量，则它们具有函数范围（let，const它们是块范围），并且使用imediately-invoked-function-execution（ IIFE），变量变成某种块范围。

Answer 2

您可以尝试以下两种解决方案：

合并亲戚（li），绝对（跨度）和静态（img）位置 - jsfiddle

var i, Size = 240;
for (i = 0; i < 10; i++) {
    $("#sortable").append('<li style="position:relative; color:white"> <span style="position:absolute; top:20px; left:20px;">text '+i+'</span> <img src="/img/test.png" style="width:'+Size+'px;height:'+Size+'px; border:1px solid black" id="img'+i+'"/> </li>');
}

或在画布上绘制图像 - jsfiddle

var i, Size = 240;
for (i = 0; i < 10; i++) {
    $("#sortable").append('<li> Canvas'+i+'<br/><canvas style="width:'+Size+'px;height:'+Size+'px; border:1px solid black" id="canvas'+i+'"/></li>');
}

var img = new Image();
img.src = "/img/test.png";
img.onload = draw_image;

function draw_image() {
    $('canvas').each(function(i){
        var context = this.getContext("2d");
        context.drawImage(img, 0, 0,Size,Size);
        context.font = "40pt Calibri";
        context.fillStyle = "green";
        context.fillText("text "+i, 30, 40);
    });
}

第一个解决方案非常好地解释了here，第二个解决方案基于this html5 canvas tutorial。

将画布和图像添加到动态创建的li元素中

2 个答案: