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

封装方法:

/**
* @矩形canvas库
* @authors Shimily (275766400@qq.com)
* @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); //执行
上一篇:Office开发必备知识----为什么要释放非托管Com资源


下一篇:PageRank算法MapReduce实现