添加畫布和圖像來動態創建li元素

我用jquery動態創建li元素。這裏是我的代碼添加畫布和圖像來動態創建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元素

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

來源

2012-07-25 man_or_astroman

是。這是可能的。 – Shikiryu 2012-07-25 08:46:56

好的，有關我如何做到這一點的任何幫助？ – 2012-07-25 08:54:22

你必須多解釋一下你實際想要達到的目標，我相信我們可以幫助你。 – 2012-07-25 08:54:48

您可以嘗試這兩種解決方案：

結合相對（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。

來源

2012-07-25 09:03:02 Stano

閉幕應該做的伎倆：

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 
}

來源

2012-07-25 10:42:13 Engineer

添加畫布和圖像來動態創建li元素

回答

相關問題