用html5 Canvas制作一个简单的游戏 英雄抓小怪物（上）

1.创建一个Canvas对象

      先在HTML页面上创建画布，然后再通过document.getElementById()来获取。

        //创建画布canvas，并获取画布上下文环境

           var  canvas = document.createElement("canvas");

           var ctx = canvas.getContext("2d");

            canvas.width =512;

            canvas.height =480;

            document.appendChild(canvas);

2.载入图片

           //背景图片  bgImage

             var bgReady =false;

             var bgImage =new Image();

             bgImage.onload = function (){

                              bgReady =  true;

                                   };

              bgImage.src = "images/background.png";

            注：把bgImage.src  写在bgImage.onload之后是为了解决IE显示的bug。

3.定义游戏要使用的对象

           //游戏对象

            var  hero ={