javascript在畫布上畫一個圖像

我嘗試構建一個JavaScript代碼，在畫布上繪製圖像，但我不知道哪裏出錯。這是我的代碼：javascript在畫布上畫一個圖像

<body> 
<canvas id = "my_canvas"></canvas> 
<script> 
function setup(){ 
    var canvas = document.getElementById('my_canvas'); 
    var ctx = canvas.getContext('2d'); 
    canvas.width = 800; 
    canvas.height = 600; 
    var image = new Image(); 
    image.src = 'a.png'; 
    ctx.drawImage(image,5,5); 
}; 
window.onload = setup; 
setup(); 

</script>

的問題是，如果我把一行代碼setup();月底該圖像，然後正確地繪製，我不知道爲什麼。

謝謝。

來源

2013-10-19 changbenny

您可以發佈您的HTML代碼嗎？另外，你是否在瀏覽器的控制檯中發現任何錯誤？這是一個開始的好地方。而...你的問題是什麼？ – Shahar

是的，我編輯代碼並感謝您的建議。 – changbenny

的問題是，image異步加載，因此，如果您設置源和借鑑其立即然後將圖像位尚不具備，並沒有什麼畫。

您必須等待圖像加載後才能在畫布上繪製它。

代碼更改爲

image.onload = function() { 
    ctx.drawImage(image, 5, 5); 
}; 
image.src = "a.png";

預期應該工作。

來源

2013-10-19 20:48:06 6502

好的，我明白了，謝謝你的解釋。 – changbenny

圖像異步加載。此代碼將工作：

的JavaScript：

function setup(){ 
    var canvas = document.getElementById('myCanvas'); 
    var ctx = canvas.getContext('2d'); 
    canvas.width = 800; 
    canvas.height = 600; 
    var image = new Image(); 
    image.onload = function() { 
     ctx.drawImage(image,5,5); 
    }; 
    image.src = 'a.png'; 
} 
window.onload = setup;

來源

2013-10-19 21:01:39 Aeoril

感謝您的解釋！ – changbenny

javascript在畫布上畫一個圖像

回答

相關問題