HTML5 使用 Canvas 畫圖時，只有在逐步偵錯時圖片才會顯示
問題的來龍去脈
我想在 Canvas 上畫一張圖的一部分，可是都看不到圖，只有一行一行 Trace 的時候才會出現，請大家幫我看一下是少了甚麼設定嗎？
<div>
<canvas id="diceCanvas" width="64" height="64">
</canvas>
</div>
JavaScript 如下
var diceCanvas = document.getElementById("diceCanvas");
var diceContext = diceCanvas.getContext("2d");
var imageDice26 = new Image();
imageDice26.src = "Images/Dice26.jpg";
diceContext.drawImage(imageDice26, 0, 0, 64, 64, 0, 0, 64, 64);
問題的解決方法
你的問題在於 imageDice26 的部分，你要等它 onload 再去做 drawImage 的事情，這也是你為什麼使用逐步偵錯的方式會顯示正常的原因，參考以下程式碼：
<!DOCTYPE html>
<html>
<body>
<div>
<canvas id="diceCanvas" width="64" height="64">
</canvas>
</div>
<script>
var diceCanvas = document.getElementById("diceCanvas");
var diceContext = diceCanvas.getContext("2d");
var imageDice26 = new Image();
imageDice26.src = "http://dl.dropbox.com/u/81843658/openday.jpg";
imageDice26.onload = function () {
diceContext.drawImage(imageDice26, 0, 0, 64, 64, 0, 0, 64, 64);
}
</script>
</body>
</html>
