drawImage畫布方法在'img'元素有機會完全加載之前運行

'img'元素有機會完全加載之前運行drawImage畫布方法，因此我需要您的幫助來解決此問題。drawImage畫布方法在'img'元素有機會完全加載之前運行

<canvas id="drawImage" width="900" height="900" style=""> </canvas> 
<img id="img" src="images/fb.png"/> 

<script type="text/javascript"> 

    var canvas = document.getElementById("drawImage"); 
    var cont = canvas.getContext("2d"); 
    var img = document.getElementById("img"); 
    cont.drawImage(img , 100 , 100); 

</script>

我想這個代碼來繪製圖像，但它並沒有得出任何事情

來源

2014-05-16 Moh

您是否嘗試過任何操作？如果你確實向我們展示了你的代碼，並告訴我們什麼不起作用。如果沒有，那麼你應該只是谷歌一點，有很多的例子。 – Daanvn

@Daanvn那是我的代碼。 – Moh

首先，你的代碼在畫布上繪製'img'元素是正確的。

一個問題是，代碼在'img'元素有機會完全加載之前運行。

因此，您必須告訴瀏覽器在頁面元素完全加載之前不要運行您的javascript。

您可以通過在window.onload這樣的包裹你的JavaScript告訴瀏覽器：

<script> 
window.onload=(function(){ 

    var canvas = document.getElementById("drawImage"); 
    var cont = canvas.getContext("2d"); 
    var img = document.getElementById("img"); 
    cont.drawImage(img , 100 , 100); 

}); // end $(function(){}); 
</script>

注： HTML畫布被設計爲能夠在IMG元素來讀取像素。畫布不能和其他畫布元素一樣（你在你的問題中提到了一個div）。有一個插件腳本可將HTML轉換爲畫布圖形：http://html2canvas.hertzen.com/

來源

2014-05-16 15:27:03 markE

據我所知，你不能把任何DOM元素在畫布上。但是你可以嘗試在圖像上放置圖像

var example = document.getElementById("example"), 
ctx = example.getContext('2d'), // context 
pic = new Image();    // creating new image 
pic.src = 'http://habrahabr.ru/i/nocopypast.png'; //source 
pic.onload = function() { // Waiting till load 
    ctx.drawImage(pic, 0, 0); 
} // Draw image when it's loaded

來源

2014-05-16 13:39:10 desu

drawImage畫布方法在'img'元素有機會完全加載之前運行

回答

相關問題