如何在圖像上繪製圖像？

在Javascript中，只有在鏈接到圖像時才能將圖像繪製到畫布上，如下所示：http://www.mydomain.com/folder/car.png？如何在圖像上繪製圖像？

注意：鏈接將在您想知道的同一個域上。

來源

2013-07-10 omega

搶鏈接href，將其提供給一個IMG的的.src和的drawImage（）的IMG到畫布 – dandavis

但在我的情況下，那裏有2000個鏈接，這真的是唯一的出路？ – omega

@omega把鏈接放在一個數組中，並迭代每一個... – brbcoding

實例化Image（），設置url並調用context.drawImage（params）。

http://www.html5canvastutorials.com/tutorials/html5-canvas-images/

來源

2013-07-10 18:15:36 Seano666

輝煌的研究 – dandavis

如果我正在做一個for循環，每次迭代獲得一個新的鏈接，我可以重複使用相同的圖像對象嗎？就像每次更改src一樣，onload函數是否會觸發？或者如果我爲每一個創建一個新的圖像對象，它會更快？ – omega

http://jsfiddle.net/dYupU/

你只需要定義一個js Image對象，並使用的drawImage（）

var d_canvas = document.getElementById('canvas'); 
var context = d_canvas.getContext('2d'); 
var ballon = new Image(); 
ballon.src = "http://i.imgur.com/6l6v2.png"; 
context.drawImage(ballon, 100, 1)

來源

2013-07-10 18:19:07

您可以重複使用相同的圖像對象，我更新了小提琴檢查出來 –

如果速度是一個問題，您可能想要查看一張圖像中的所有2000張圖像的精靈圖。您可以使用額外的參數調用drawImage以這種方式使用它。 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D –

這裏是通過多條鏈路的例子，內循環警報告訴你每個鏈接的價值

var can = document.getElementById('pictures'); 
var ctx = can.getContext('2d'); 
var img = ['http://placekitten.com/200/300','http://placekitten.com/100/100','http://placekitten.com/125/125','http://placekitten.com/50/50','http://placekitten.com/150/300']; 
for(var i = 0; i <= img.length - 1; i ++){ 
    var cat = new Image(); 
    cat.src = img[i]; 
    ctx.drawImage(cat, 50, 50); 
    alert('drew ' + cat.src); 
}

DEMO

來源

2013-07-10 18:25:27 brbcoding

onload事件怎麼樣？只有在圖像加載後才需要繪製它？ – omega

如何在圖像上繪製圖像？

回答

相關問題