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); //执行
给心灵一个纯净空间,让思想,情感,飞扬!