0

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

2 回答 2

3

闭包应该可以解决问题：

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），变量变成某种块作用域。

于 2012-07-25T10:42:13.693 回答
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);
    });
}

第一个解决方案在这里得到了很好的解释，第二个是基于这个 html5 画布教程。

于 2012-07-25T09:03:02.373 回答