Jquery 向动态创建的li元素添加画布和图像

我用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>");
}

（i=0；i<100；i++）的

{
$（“#可排序”）.append（“
”+”图像“+i+”
”；
}

现在，我想在每个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);
     };
}

（i=0；i<100；i++）的

{
var canvas1=document.getElementById（'canvas'+i）.getContext（“2d”）；
var img=新图像（）；
img.src=“/img/test.png”；
img.onload=函数（）{
canvas1.drawImage（img，0，0，Size，Size）；
};
}

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

• 结合相对（li）、绝对（span）和静态（img）位置-

vari，大小=240；
对于（i=0；i<10；i++）{
$（“#可排序”）.append（“
文本“+i+”
”）；
}

• 或在画布上绘制图像-

vari，大小=240；
对于（i=0；i<10；i++）{
$（“#可排序”）.append（“
画布”+i+”
）；
}
var img=新图像（）；
img.src=“/img/test.png”；
img.onload=绘制图像；
函数draw_image（）{
$（'canvas'）。每个（函数（i）{
var context=this.getContext（“2d”）；
drawImage（img，0，0，Size，Size）；
context.font=“40pt Calibri”；
context.fillStyle=“绿色”；
上下文。填充文本（“文本”+i，30，40）；
});
}

---

第一种解决方案解释得很好，第二种基于。

您可以尝试以下两种解决方案中的一些：

• 结合相对（li）、绝对（span）和静态（img）位置-

vari，大小=240；
对于（i=0；i<10；i++）{
$（“#可排序”）.append（“
文本“+i+”
”）；
}

• 或在画布上绘制图像-

vari，大小=240；
对于（i=0；i<10；i++）{
$（“#可排序”）.append（“
画布”+i+”
）；
}
var img=新图像（）；
img.src=“/img/test.png”；
img.onload=绘制图像；
函数draw_image（）{
$（'canvas'）。每个（函数（i）{
var context=this.getContext（“2d”）；
drawImage（img，0，0，Size，Size）；
context.font=“40pt Calibri”；
context.fillStyle=“绿色”；
上下文。填充文本（“文本”+i，30，40）；
});
}

---

第一种解决方案解释得很好，第二种解决方案基于。

闭包应该做到这一点：

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
}

（i=0；i<100；i++）的

{
（功能（i）{//添加行
var canvas1=document.getElementById（'canvas'+i）.getContext（“2d”）；
var img=新图像（）；
img.src=“/img/test.png”；
img.onload=函数（）{
canvas1.drawImage（img，0，0，Size，Size）；
};
})（i） ；//添加行
}

---

问题是当

.onload

事件将被触发时，

for

循环将已经结束，

img

将只引用最后一个

图像

对象。一般来说，如果变量是用

var

定义的，它们有函数作用域（用

let

，

const

它们是块作用域），并且通过使用即时调用函数执行（IIFE），变量变成某种块作用域。

闭包应该做到以下几点：

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
}

（i=0；i<100；i++）的

{
（功能（i）{//添加行
var canvas1=document.getElementById（'canvas'+i）.getContext（“2d”）；
var img=新图像（）；
img.src=“/img/test.png”；
img.onload=函数（）{
canvas1.drawImage（img，0，0，Size，Size）；
};
})（i） ；//添加行
}

---

问题是当

.onload

事件将被触发时，

for

循环将已经结束，

img

将只引用最后一个

图像

对象。一般来说，如果变量是用

var

定义的，那么它们有函数作用域（用

let

，

const

它们是块作用域），并且通过使用即时调用函数执行（IIFE），变量变成某种块作用域。

Ok，关于我如何做到这一点有什么帮助吗？你需要进一步解释你真正想要实现的目标，我相信我们可以帮助你。我希望在每个动态创建的li中使用drawImage，然后能够在此图像上添加一些文本。我编辑了原始答案并添加了我尝试过的代码，但它只添加了最后一个LIG上的img，而你只添加了一个图像。为什么要使用canvas呢？因为以后我想动态地使用canvas在每个图像的顶部写入文本。我认为这是唯一的方法好的，关于我如何做到这一点有什么帮助吗？你需要更多地解释一下你真正想要实现的目标，我相信我们可以帮助你。我希望在每个动态创建的li中使用drawImage，然后能够在此图像上添加一些文本。我编辑了原始答案并添加了我尝试过的代码，但它只添加了最后一个LIG上的img，而你只添加了一个图像。为什么要使用canvas呢？因为以后我想动态地使用canvas在每个图像的顶部写入文本。我认为这是唯一的办法