Canvas 帧动画(封装成对象),绘制图片(drawImage())

person.js（封装的外部JS文件）：

(function( w ) {
    
    // 混入式继承( copy继承 )
    function extend( o1, o2 ) {
        for ( var key in o2 ) {
            if ( o2.hasOwnProperty( key ) ) {
                o1[ key ] = o2[ key ];
            }
        }
    }

    /*
     * constructor { Person } 人构造函数
     * param { ctx: Context } 绘制环境
     * param { img: Image } 绘制的图像
     * param { widthFrame: number } 图像一排有多少个人
     * param { heightFrame: number } 图像一列有多少个人
     * param { x: number } 指定人物绘制的x轴坐标
     * param { y: number } 指定人物绘制的y轴坐标
     * param { renderWidth: number } 人物绘制时的宽
     * param { renderHeight: number } 人物绘制时的高
     * param { speed: number } 人物行走的速度
     * */
    function Person( ctx, img, widthFrame, heightFrame, x, y, renderWidth, renderHeight, speed ) {

        this.ctx = ctx;
        this.img = img;
        this.widthFrame = wid