面向对象版本的矩形绘制

html代码：

<script>
    (function(){
        var canvas1 = document.querySelector( '#cavsElem1' );
        var canvas2 = document.querySelector( '#cavsElem2' );
        var ctx1 = canvas1.getContext( '2d' );
        var ctx2 = canvas2.getContext( '2d' );
        canvas1.width = 600;
        canvas1.height = 600;
        canvas1.style.border = "1px solid #000";
        canvas2.width = 600;
        canvas2.height = 600;
        canvas2.style.border = "1px solid #000";
        //创建矩形
        var rect=new fun({
            x:100,
            y:100,
            w:100,
            h:100,
            opacity:.6,
            rotation:60,
            scaleX:1,
            scaleY:1,
            fillStyle:'purple',
            strokeStyle:'yellow'
        });
        //渲染矩形
        rect.render(ctx1);
        setInterval(function(){
            ctx1.clearRect(0,0,canvas1.width,canvas1.height);
            rect.x+=10;
            rect.render(ctx1);
            ctx2.drawImage(canvas1,0,0);
        },100)
    }());
</script>

JS代码：

<script>
    function fun(option){
        this._init(option);
    }
    fun.prototype={
        _init:function(option){
            this.x=option.x||0;
            this.y=option.y||0;
            this.h=option.h||0;
            this.w=option.w||0;
            this.rotation=option.rotation||0;
            this.opacity=option.opacity==0?0:option.opacity||1;
            this.scaleX=option.scaleX||1;
            this.scaleY=option.scaleY||1;
            this.strokeStyle=option.strokeStyle||'red';
            this.fillStyle=option.fillStyle||'blue';
        },
        render:function(ctx){
            ctx.save();// 把当前的上下文的状态保存一下
            ctx.beginPath();
            ctx.translate(this.x,this.y);
            ctx.rotate(this.rotation*Math.PI/180);
            ctx.globalAlpha=this.opacity;
            ctx.scale(this.scaleX,this.scaleY);
            //给 ctx规划一个路径。注意：规划的路径会一直保存。所以
            //最好在每次绘制矩形的时候beginPath一下标志一个新的路径。
            ctx.rect(0,0,this.w,this.h);
            ctx.fillStyle=this.fillStyle;
            ctx.fill();
            ctx.strokeStyle=this.strokeStyle;
            ctx.stroke();
            ctx.restore();//还原绘制的状态
        }
    };
</script>