封裝方法：

/*** @矩形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); //執行

?

轉載于:https://www.cnblogs.com/shimily/p/6240016.html

總結

以上是生活随笔為你收集整理的js面向对象的封装方法，【案例】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。