<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) })