目录
  1. WIKI教程
  2. 学习HTML5
  3. 画布变换(Canvas Transform)

画布变换(Canvas Transform)

HTML5画布提供了合成属性globalCompositeOperation ，它影响所有绘图操作。

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

可以为globalCompositeOperation设置以下值:

Sr.No. 属性和描述
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

在两个形状重叠的情况下，通过减去颜色值来确定颜色。

例子 (Example)

以下是一个使用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');
               // draw rectangle
               ctx.fillStyle = "#FF3366";
               ctx.fillRect(15,15,70,70);
               // set composite property
               ctx.globalCompositeOperation = compositeTypes[i];
               // draw circle
               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>

以上示例将产生以下结果 -

新页面打开
↑回到顶部↑
WIKI教程 @2018