[HTML5 graphics and animation graphic] Synthesis 1. Synthesis globalCompositeOperation 2. Crop clip

The following notes to study this book do the following figure, unoriginal. Notes mainly to practice it and see the results deepen our memory.

 

table of Contents:

1. Synthesis of    2. Crop

 

1.synthesis

① globalCompositeOperation different attribute values, the graphics rendering order is different.

Statement:

. 1  < Canvas ID = "Canvas" width = "200 is" height = "200 is" style = "border: Solid 1px # 999;" > </ Canvas > 
2  < Script > 
. 3      Draw ();
 . 4      function Draw () {
 . 5          // use document.getElementById () method, the element obtained according to the canvas canvas ID references 
. 6          var CTX = document.getElementById ( ' canvas ' ) .getContext ( ' 2D ' );
 . 7          CTX.fillStyle = "Red " ;
 . 8          // new rectangle 
. 9          ctx.fillRect ( 50 , 25 , 100 , 100 );
 10          ctx.fillStyle =  " Green " ;
 . 11          CTX. the globalCompositeOperation  =  " Source-over " ;    // Default: source-over 
12 is          ctx.beginPath ();
 13 is          // new circle 
14          ctx.arc ( 150 , 125 , 20 is , 0, Math.PI*2, true);
15         ctx.closePath();
16         ctx.fill();
17     }
18 </script>

Page performance:

The default for the new graphic overlay on top of the original content. Original content for the destination, the new graphics for the source.

The code Change Behavior 11: CTX. The globalCompositeOperation = " Where do you want-over " ;

Page as follows:

Change the code of conduct 11: ctx.globalCompositeOperation = " Source-ATOP " ;

Page as follows:

 Change the code of conduct 11: ctx.globalCompositeOperation = " Where do you want-ATOP " ;

Page as follows:

 更改代码第 11 行为 ：ctx.globalCompositeOperation = "source-over";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation = "destination-in";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation ="source-out";

页面表现为：

  更改代码第 11 行为 ：ctx.globalCompositeOperation ="destination-out";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation = "lighter";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation = "darker";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation = "copy";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation = "xor";

页面表现为：

 

2.裁切

① 剪切一个区域，在这个区域内绘图

语句：

 1 <canvas id="canvas" width="300" height="300" style="border:solid 1px #999;"></canvas>
 2 <script>
 3     draw();
 4     function draw(){
 5         //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
 6         var ctx = document.getElementById('canvas').getContext('2d');
 7         ctx.rect(0, 0, 200, 200);
 8         ctx.stroke();
 9         ctx.clip();
10         //使用clip()剪切出一个宽200高200的区域，之后的绘图都被现在在了这个区域内
11         ctx.fillStyle = "green";
12         ctx.fillRect(0,0,300,100);
13     }
14 </script>

页面表现：

 

 ② 绘制一个圆形，进行裁切，圆形之外的区域将不会绘制在 canvas 上。

语句：

 1 <canvas id="canvas" width="300" height="300" style="border:solid 1px #999;"></canvas>
 2 <script>
 3     draw();
 4     function draw(){
 5         //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
 6         var ctx = document.getElementById('canvas').getContext('2d');
 7         //绘制背景
 8         ctx.fillStyle = "black";
 9         ctx.fillRect(0, 0, 300, 300);
10         ctx.fill();
11         //绘制圆形  
12         ctx.beginPath();
13         ctx.arc(150, 150, 100, 0, Math.PI*2, true);
14         //裁剪路径
15         ctx.clip(); //clip()的作用是形成一个蒙版，没有被蒙版的区域会被隐蔽
16         for( var i=1; i<90; i++ ){
17             ctx.save();
18             ctx.transform(0.95,0,0,0.95,30,30);
19             ctx.rotate(Math.PI/12);
20             ctx.beginPath();
21             ctx.fillStyle="red";
22             ctx.globalAlpha="0.4";
23             ctx.arc(0,0,50,0,Math.PI*2,true);
24             ctx.closePath();
25             ctx.fill();
26         }
27     }
28 </script>

页面表现：