context.drawImage古怪行爲

我有：context.drawImage古怪行爲

<canvas id='canvas' width="300" height="409" style="border:2px solid darkblue" > 
</canvas>

然後：

<script type="text/javascript"> 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    var image = new Image(); 
    image.src = 'http://4.bp.blogspot.com/...-21+Kingfisher.JPG'; 
    alert(image.src); 
    context.drawImage(image, 0, 0, 300, 400); 
</script>

在IE 10，圖像被描繪成「可以預期的」。但是，當我刪除該警報聲明時，該圖片未被繪製！

在Chrome中，無論是否帶有警報聲明，本地PC上都不會顯示圖像。

會發生什麼情況？小提琴是here

來源

2013-07-23 Old Geezer

這是因爲加載圖像是一個異步操作。警報呼叫有助於瀏覽器等待一段時間，以便加載圖像。爲此，圖片將在drawImage後面提供。

實現這個正確的方法是使用這樣的代碼：

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
var image = new Image(); //document.createElement('img'); for Chrome due to issue 

// add a onload handler that gets called when image is ready 
image.onload = function() { 
    context.drawImage(this, 0, 0, 300, 400); 
} 

// set source last so onload gets properly initialized 
image.src = 'http://4.bp.blogspot.com/...-21+Kingfisher.JPG';

回調內部的抽籤操作的onload可以很容易地是一個函數調用：

image.onload = nextStep; 
// ... 

function nextStep() { 
    /// draw image and other things... 
}

來源

2013-07-23 15:31:12 K3N

context.drawImage古怪行爲

回答

相關問題