HTML5 canvas提供了合成属性 globalCompositeOperation ，该属性会影响所有绘图操作。
无涯教程可以在现有形状后面绘制新形状，并遮盖某些区域，使用globalCompositeOperation属性从画布中清除部分，如示例中所示。
可以为globalCompositeOperation设置以下值-
| Sr.No. | Attribute & Remark |
|---|---|
| 1 | source-over 这是默认设置，并在现有画布内容之上绘制新形状。 |
| 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>
上面的示例将产生以下输出-
HTML5 中的 Canvas Composition函数 - 无涯教程网无涯教程网提供HTML5 canvas提供了合成属性 globalCompositeOperation ，该属性会影响所有绘图操作。...
https://www.learnfk.com/html5/canvas-composition.html
