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

【问题标题】：add canvas and images to dynamically created li elements将画布和图像添加到动态创建的 li 元素
【发布时间】：2012-07-23 15:32:19
【问题描述】：

我正在使用 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 元素中添加带有画布的图像，并使用画布再次编写一些文本。有可能吗？

这是我到目前为止编写的代码，但它只将图像添加到最后一个 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);
     };
}

【问题讨论】：

好的，有什么帮助吗？
您必须多解释一下您真正想要实现的目标，我相信我们可以为您提供帮助。
我希望在每个动态创建的 li 中使用 drawImage，然后能够在该图像之上添加一些文本。我编辑了原始答案并添加了我尝试过的代码，但它只在最后一个 li 上添加了 img
您只需添加一张图片。你为什么要为此使用画布？
因为以后我想动态地使用画布在每个图像的顶部写文本。我认为这是做到这一点的唯一方法

标签： jquery image html canvas

【解决方案1】：

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

结合相对（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。

【讨论】：

【解决方案2】：

关闭应该可以解决问题：

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它们是块作用域），并且通过使用立即调用函数执行（IIFE），变量变为某种块作用域。

【讨论】：