canvas学习day2——帧动画,小人物原地行走

帧动画
效果图
人在走动的录像

思路
1、CSS精灵技术
相关讲解
2、drawImage函数

 第一种，三参数版本：
        * 把图像绘制到指定的坐标。
        * */

        // 必须要在img图像下载完毕之后使用
        /*img.onload = function() {
            ctx.drawImage( img, 10, 10 );
        }*/


        /*
         * 第二种，五参数版本：
         * 把图像绘制到指定的坐标，并指定其大小。
         * */

        // 必须要在img图像下载完毕之后使用
        /*img.onload = function() {
            ctx.drawImage( img, 10, 10, 200, 200 );
        }*/

        /*
         * 第三种，九参数版本：
         * 把裁剪到的部分图像绘制到指定的坐标，并指定其大小。
         * */

        // 必须要在img图像下载完毕之后使用
        img.onload = function() {
   
            ctx.drawImage( img,
                    300, 100, 400, 400