关注我们

HTML5 中的 Canvas Composition函数

HTML5 canvas提供了合成属性 globalCompositeOperation ，该属性会影响所有绘图操作。

无涯教程可以在现有形状后面绘制新形状，并遮盖某些区域，使用globalCompositeOperation属性从画布中清除部分，如示例中所示。

可以为globalCompositeOperation设置以下值-

Sr.No.	Attribute & Remark
1	source-over 链接：https://www.learnfk.comhttps://www.learnfk.com/html5/canvas-composition.html 来源：LearnFk无涯教程网这是默认设置，并在现有画布内容之上绘制新形状。
2	source-in 仅在新形状和目标画布都重叠的地方绘制新形状。其他一切都变得透明。
3	source-out 在不与现有画布内容重叠的位置绘制新形状。
4	source-atop 仅在与现有画布内容重叠的位置绘制新形状。
5	lighter 两种形状重叠的位置通过添加颜色值来确定颜色。
6	xor 将形状透明化，使其在其他任何地方都重叠并绘制法线。
7	destination-over 在现有画布内容后面绘制新形状。
8	destination-in 现有画布内容保留在新形状和现有画布内容重叠的位置。其他一切都变得透明。
9	destination-out 现有内容将保留在不与新形状重叠的位置。
10	destination-atop 现有画布仅保留在与新形状重叠的位置。新形状绘制在画布内容的后面。
11	darker 两种形状重叠的位置通过减去颜色值确定颜色。

以下是一个简单的示例，该示例利用globalCompositeOperation属性创建所有可能的组合-

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type="text/javascript">
         var compositeTypes=[
            'source-over','source-in','source-out','source-atop',
            'destination-over','destination-in','destination-out',
            'destination-atop','lighter','darker','copy','xor'
         ];
         
         function drawShape() {
            for (i=0;i<compositeTypes.length;i++) {
               var label=document.createTextNode(compositeTypes[i]);
               document.getElementById('lab'+i).appendChild(label);
               var ctx=document.getElementById('tut'+i).getContext('2d');
               
               //绘制矩形
               ctx.fillStyle="#FF3366";
               ctx.fillRect(15,15,70,70);
               
               //设置复合属性
               ctx.globalCompositeOperation=compositeTypes[i];
               
               //画圆
               ctx.fillStyle="#0066FF";
               ctx.beginPath();
               ctx.arc(75,75,35,0,Math.PI*2,true);
               ctx.fill();
            }
         }
      </script>
   </head>
   
   <body onload="drawShape();">
      <table border="1" align="center">
         <tr>
            <td><canvas id="tut0" width="125" height="125"></canvas><br/>
               <label id="lab0"></label>
            </td>
            
            <td><canvas id="tut1" width="125" height="125"></canvas><br/>
               <label id="lab1"></label>
            </td>
            
            <td><canvas id="tut2" width="125" height="125"></canvas><br/>
               <label id="lab2"></label>
            </td>
         </tr>
         
         <tr>
            <td><canvas id="tut3" width="125" height="125"></canvas><br/>
               <label id="lab3"></label>
            </td>
            
            <td><canvas id="tut4" width="125" height="125"></canvas><br/>
               <label id="lab4"></label>
            </td>
            
            <td><canvas id="tut5" width="125" height="125"></canvas><br/>
               <label id="lab5"></label>
            </td>
         </tr>
         
         <tr>
            <td><canvas id="tut6" width="125" height="125"></canvas><br/>
               <label id="lab6"></label>
            </td>
            
            <td><canvas id="tut7" width="125" height="125"></canvas><br/>
               <label id="lab7"></label>
            </td>
            
            <td><canvas id="tut8" width="125" height="125"></canvas><br/>
               <label id="lab8"></label>
            </td>
         </tr>
         
         <tr>
            <td><canvas id="tut9" width="125" height="125"></canvas><br/>
               <label id="lab9"></label>
            </td>
            
            <td><canvas id="tut10" width="125" height="125"></canvas><br/>
               <label id="lab10"></label>
            </td>
            
            <td><canvas id="tut11" width="125" height="125"></canvas><br/>
               <label id="lab11"></label>
            </td>
         </tr>         
      </table>
      
   </body>
</html>

上面的示例将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Go 并发编程实战课 -〔晁岳攀（鸟窝）〕

Kubernetes入门实战课 -〔罗剑锋〕

现代C++20实战高手课 -〔卢誉声〕

好记忆不如烂笔头。留下您的足迹吧 :)