js 대상을 위한 봉인 방법, [사례]

4202 단어
포장 방법:
/**
 * @ 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

좋은 웹페이지 즐겨찾기