问题1：canvas绘制图片加载不出来

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