js面向对象的封装方法，【案例】

封装方法：

/**
 * @矩形canvas库
 * @authors Shimily ([email protected])
 * @date    2016-12-28 10:30:51
 * @version $Id$
 */

function Rect( options){
    this._init(options);   //执行方法
}
Rect.prototype={   
    _init:function(options){
        this.x=options.x || 0;   //参数设置，如果不传参数，则设置默认值
        this.y=options.y || 0;this.opacity=options.opacity===0 ? 0: options.opacity || 1;
        this.scaleX=options.scaleX ||1;
        this.scaleY=options.scaleY ||1;

        this.strokeStyle=options.strokeStyle || 'red';
        this.fillStyle=options.fillStyle||'red';
    },
    render:function(ctx){   //执行绘制
        ctx.save();   //先保存状态
        ctx.beginPath();

        ctx.translate(this.x, this.y);
        
        ctx.rotate(this.rotation * Math.PI /180);
        ctx.globalAlpha=this.optacity;
        ctx.scale(this.scaleX, this.scaleY);
        //ctx.rect(this.x, this.y, this.w, this.h); //绘制矩形
        ctx.rect(0, 0, this.w, this.h); //绘制矩形   设置旋转为矩形的左顶点，要将画布进行位移ctx.translate(this.x, this.y);

        ctx.fillStyle=this.fillStyle;
        ctx.fill();  //填充颜色

        ctx.strokeStyle=this.strokeStyle;
        ctx.stroke();
        ctx.restore();   //释放状态
    }
}

调用方法：

var rect= new Rect({   //设置属性
            x:300,
            y:200,
            w:100,
            h:120,
            rotation:30,
            opacity:0.3,
            scaleX:1.5,
            scaleY:1.5,
            fillStyle:'blue',
            strokeStyle:'yellow'
        });
 rect.render(ctx);  //执行

 

转载于:https://www.cnblogs.com/shimily/p/6240016.html