<head>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--創建畫布-->
<canvas id="myCanvas" height="100px" width="100px"></canvas>
</body>
/*此處window.onload解決HTML頁面完成后再執行js代碼*/ window.onload = function(){ var myCanvas = document.getElementById("myCanvas"); var ctx = myCanvas.getContext("2d"); var pic = new Image(); pic.src = "圖片地址";/*地址要填相對HTML文件的地址*/ pic.onload = function(){//等圖片加載完成后再繪制 ctx.drawImage(pic,0,0,width,height); } }
加載圖片需要時間，不寫pic.onload 會導致圖片加載不出來；
當然還有另外一種方法解決加載問題：init()方法中加載圖片，將繪制方法放到定時器中，設置一定的等待時間，之前嘗試10ms,網速較慢，偶爾還是會加載不出來部分圖片，索性設置為50ms,多次測試沒有加載問題
$(function(){ init(); //使用定時器，規定50ms后再繪制，主要是要先讓初始化方法中的圖片都加載完成，替代了img.onload方法 setTimeout(function(){ drawBackground(); seeweed.draw(); fruit.draw(); },50) })