在書上看到用<canvas>繪制圖像就動手試試，剛開始，我的代碼是這樣的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas繪圖</title>
</head>
<body>
<canvas id="drawimg" width="500" height="500" style="border:1px solid black;">A drawimg of something.</canvas>
<img id="image" src="01.jpg" style="display:none" />
<script>
var drawimg = document.getElementById("drawimg"); var image=document.getElementById("image"); var context = drawimg.getContext("2d"); context.drawImage(image,10,10); </script>
</body>
</html>
很可惜，在瀏覽器中只出現了一個黑線框，沒有圖片。我檢查了一下，圖片路徑沒有錯，瀏覽器版本也支持，控制台也沒有報錯，，不科學啊。
然后去w3school查了一下drawImage()這個方法，還有樣例代碼，看了一下樣例代碼感覺差不多啊，於是復制過去，，將圖片改成自己本地的圖片，然而並沒有什么用，還是沒有顯示出來。糾結萬分於是去網上查了一下原因。
<script> window.onload=function(){ var drawimg = document.getElementById("drawimg"); var image=document.getElementById("image"); var context = drawimg.getContext("2d"); context.drawImage(image,10,10); } </script>
這是改過的js代碼，我將原來的那些代碼放在了onload里面，圖片在瀏覽器中就顯示出來了。
因為圖片是異步加載，onload 事件會在頁面或圖像加載完成后立即發生。在之前的代碼中，執行js代碼的時候圖片還沒有加載成功，就調用了drawImage()方法，所以圖片就無法顯示。