Canvas矩形封装

var cvs = document.getElementById('cvs');
  var ctx = cvs.getContext('2d');
 // 对象矩形封装
//      构造函数
        function JuXing(ctx,startX,startY,width,height,lineWidth,strokeStyle,fillStyle){
            this.ctx=ctx;
            this.startX=startX;
            this.startY=startY;
            this.width=width;
            this.height=height;
            this.lineWidth=lineWidth;
            this.strokeStyle=strokeStyle;
            this.fillStyle=fillStyle;
        }
        //绘制函数
        JuXing.prototype.darw=function(){
            this.ctx.beginPath();
            this.ctx.moveTo(this.startX,this.startY);
            this.ctx.lineTo(this.startX+this.width,this.startY);
            this.ctx.lineTo(this.startX+this.width,this.startY+this.height);
            this.ctx.lineTo(this.startX,this.startY+this.height);
            this.ctx.closePath();
            this.ctx.lineWidth=this.lineWidth;
            this.ctx.strokeStyle=this.strokeStyle;
            this.ctx.fillStyle=this.fillStyle;
            this.ctx.fill();
            this.ctx.stroke();          
        }
        var jx = new JuXing(ctx,20,20,100,80,5,"blue","red");
        jx.darw();
        var jx2 = new JuXing(ctx,40,40,100,80,5,"yellow","pink");
       jx2.darw();