canvas圖形的組合與裁切

時間 2019-12-06

標籤 canvas 圖形組合裁切简体版

原文原文鏈接

當兩個或兩個以上的圖形存在重疊區域時，默認狀況下一個圖形畫在前一個圖像之上。經過指定圖像globalCompositeOperation屬性的值能夠改變圖形的繪製順序或繪製方式，globalAlpha能夠指定圖形的透明度。javascript

globalCompositeOperation 屬性設置或返回如何將一個源（新的）圖像繪製到目標（已有）的圖像上。css

源圖像 = 您打算放置到畫布上的繪圖。html

目標圖像 = 您已經放置在畫布上的繪圖。java

ctx.globalCompositeOperation = 'source-over'; 默認設置canvas

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 *{padding: 0;margin:0;}
 8 body{background: #1b1b1b;}
 9 #div1{margin:50px auto; width:300px; height: 300px;}
10 canvas{background: #fff;}
11 </style>
12 <script type="text/javascript">
13 window.onload = function(){
14     var c=document.getElementById("myCanvas");
15     var ctx=c.getContext("2d");
16     
17     ctx.fillStyle="red";
18     ctx.fillRect(20,20,75,50);
19     ctx.fillStyle="blue";    
20     ctx.globalCompositeOperation="source-over";　　//在目標圖像上顯示源圖像。
21     
22     ctx.fillRect(50,50,75,50);    
23     ctx.fillStyle="red";
24     ctx.fillRect(150,20,75,50);
25     ctx.fillStyle="blue";    
26     ctx.globalCompositeOperation="destination-over";　　//在源圖像上方顯示目標圖像。
27     ctx.fillRect(180,50,75,50);    
28 };
29 
30 </script>
31 </head>
32 <body>
33     <div id="div1">
34         <canvas id="myCanvas" width="300" height="300"></canvas>
35     </div>
36 </body>
37 </html>

結果：app

屬性值：spa

source-over	默認。在目標圖像上顯示源圖像。
source-atop	在目標圖像頂部顯示源圖像。源圖像位於目標圖像以外的部分是不可見的。
source-in	在目標圖像中顯示源圖像。只有目標圖像內的源圖像部分會顯示，目標圖像是透明的。
source-out	在目標圖像以外顯示源圖像。只會顯示目標圖像以外源圖像部分，目標圖像是透明的。
destination-over	在源圖像上方顯示目標圖像。
destination-atop	在源圖像頂部顯示目標圖像。源圖像以外的目標圖像部分不會被顯示。
destination-in	在源圖像中顯示目標圖像。只有源圖像內的目標圖像部分會被顯示，源圖像是透明的。
destination-out	在源圖像外顯示目標圖像。只有源圖像外的目標圖像部分會被顯示，源圖像是透明的。
lighter	顯示源圖像 + 目標圖像。
copy	顯示源圖像。忽略目標圖像。
source-over	使用異或操做對源圖像與目標圖像進行組合。

eg:code

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 canvas{border:1px solid #d1d1d1; margin:20px 20px 20px 0}
 8 </style>
 9 
10 </head>
11 <body style="margin: 50px;">
12 <script type="text/javascript">
13     
14     var gco=new Array();
15     gco.push("source-atop");
16     gco.push("source-in");
17     gco.push("source-out");
18     gco.push("source-over");
19     gco.push("destination-atop");
20     gco.push("destination-in");
21     gco.push("destination-out");
22     gco.push("destination-over");
23     gco.push("lighter");
24     gco.push("copy");
25     gco.push("xor");
26     
27     for (i=0;i<gco.length;i++){
28         document.write("<div id='p_" + i + "' style='float:left;'>" + gco[i] + ":<br>");
29         var c=document.createElement("canvas");
30         c.width=120;
31         c.height=100;
32         document.getElementById("p_" + i).appendChild(c);
33         var ctx=c.getContext("2d");    
34         ctx.fillStyle="blue";
35         ctx.fillRect(10,10,50,50);
36         ctx.globalCompositeOperation=gco[i];
37         ctx.beginPath();
38         ctx.fillStyle="red";
39         ctx.arc(50,50,30,0,2*Math.PI);
40         ctx.fill();
41         document.write("</div>");    
42     }
43 
44 </script>
45 </body>
46 </html>

結果：orm

二、裁切路徑htm

ctx.clip(); clip的做用是造成一個蒙板，沒有被蒙板的區域會被隱藏。

eg：若是繪製一個圖形，並進行裁切，則圓形以外的區域將不會繪製在canvas上。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 *{padding: 0;margin:0;}
 8 body{background: #1b1b1b;}
 9 #div1{margin:50px auto; width: 300px;}
10 canvas{background: #fff;}
11 </style>
12 <script type="text/javascript">
13 window.onload = function(){
14     draw();    
15 };
16 function draw(){
17     var ctx = document.getElementById('myCanvas').getContext('2d');
18     
19     ctx.fillStyle = '#000';
20     ctx.fillRect(0,0,300,300);
21     ctx.fill();
22     //繪製圓形
23     ctx.beginPath();
24     ctx.arc(150,150,130,0,Math.PI*2,true);
25     //裁切路徑
26     ctx.clip();
27     ctx.translate(200,20);
28     for( var i=0; i<90; i++){
29         ctx.save();
30         ctx.transform(0.95,0,0,0.95,30,30);
31         ctx.rotate(Math.PI/12);
32         ctx.beginPath();
33         ctx.fillStyle = 'red';
34         ctx.globalAlpha = '0.4';
35         ctx.arc(0,0,50,0,Math.PI*2,true);
36         ctx.closePath();
37         ctx.fill();
38     }
39     
40 }
41 </script>
42 </head>
43 <body>
44     <div id="div1">
45         <canvas id="myCanvas" width="300" height="300"></canvas>
46     </div>
47 </body>
48 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。