面向对象版本的矩形绘制

html代码：

 1 <script>
 2     (function(){
 3         var canvas1 = document.querySelector( '#cavsElem1' );
 4         var canvas2 = document.querySelector( '#cavsElem2' );
 5         var ctx1 = canvas1.getContext( '2d' );
 6         var ctx2 = canvas2.getContext( '2d' );
 7         canvas1.width = 600;
 8         canvas1.height = 600;
 9         canvas1.style.border = "1px solid #000";
10         canvas2.width = 600;
11         canvas2.height = 600;
12         canvas2.style.border = "1px solid #000";
13         //创建矩形
14         var rect=new fun({
15             x:100,
16             y:100,
17             w:100,
18             h:100,
19             opacity:.6,
20             rotation:60,
21             scaleX:1,
22             scaleY:1,
23             fillStyle:'purple',
24             strokeStyle:'yellow'
25         });
26         //渲染矩形
27         rect.render(ctx1);
28         setInterval(function(){
29             ctx1.clearRect(0,0,canvas1.width,canvas1.height);
30             rect.x+=10;
31             rect.render(ctx1);
32             ctx2.drawImage(canvas1,0,0);
33         },100)
34     }());
35 </script>

JS代码：

 1 <script>
 2     function fun(option){
 3         this._init(option);
 4     }
 5     fun.prototype={
 6         _init:function(option){
 7             this.x=option.x||0;
 8             this.y=option.y||0;
 9             this.h=option.h||0;
10             this.w=option.w||0;
11             this.rotation=option.rotation||0;
12             this.opacity=option.opacity==0?0:option.opacity||1;
13             this.scaleX=option.scaleX||1;
14             this.scaleY=option.scaleY||1;
15             this.strokeStyle=option.strokeStyle||'red';
16             this.fillStyle=option.fillStyle||'blue';
17         },
18         render:function(ctx){
19             ctx.save();// 把当前的上下文的状态保存一下
20             ctx.beginPath();
21             ctx.translate(this.x,this.y);
22             ctx.rotate(this.rotation*Math.PI/180);
23             ctx.globalAlpha=this.opacity;
24             ctx.scale(this.scaleX,this.scaleY);
25             //给 ctx规划一个路径。注意：规划的路径会一直保存。所以
26             //最好在每次绘制矩形的时候beginPath一下标志一个新的路径。
27             ctx.rect(0,0,this.w,this.h);
28             ctx.fillStyle=this.fillStyle;
29             ctx.fill();
30             ctx.strokeStyle=this.strokeStyle;
31             ctx.stroke();
32             ctx.restore();//还原绘制的状态
33         }
34     };
35 </script>

 

posted @ 2017-11-28 13:03  前端极客  阅读(291)  评论(0)  编辑  收藏  举报