HTML5 Canvas drawing (二)(2)_H5之家 - 中国HTML5教程资源分享第一站

"destination":Canvas上当前显示的图形（旧图形）；

copy：指新图形会被保留，其它都被清除掉

destination-atop：指显示新图形与重叠部分的旧图形，旧图形（重叠部分）显示在上层

destination-in：指只显示旧图形的重叠部分的图形

destination-out：指只显示旧图形不重叠部分的图形

destination-over：指新旧图形都显示，把旧图形显示在上层

lighter：指新旧图形都显示，新旧图形重叠部分作加色处理

source-atop：指显示旧图表与重叠部分的新图形，新图形（重叠部分）显示在上层

source-in：指只显示新图形重叠部分的图形

source-out：指只显示新图形中不重叠部分的图形

source-over：指新旧图形都显示，新图形显示在上层

xor：指新旧图形都显示，新旧图形重叠的部分会变成透明。
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8" />
      <title>test</title>
      <script type="text/javascript" src="../script/modernizr-latest.js"></script>
      <script type="text/javascript">
         window.addEventListener("load", eventWindowLoaded, false);
         var Debugger = function() {
         };
         Debugger.log = function(message) {
            try {
                  console.log(message);
            } catch (exception) {
                  return;
            }
         }
         function eventWindowLoaded() {
            canvasApp();
         }

         function canvasSupport() {
            return Modernizr.canvas;
         }

         function canvasApp() {

            if(!canvasSupport()) {
                  return;
            }

            function drawScreen(compositing, num) {
                  var name = "c" + num;
                  var theCanvas = document.getElementById(name);
                  theCanvas.width=100;
                  theCanvas.height=100;
                  var context = theCanvas.getContext("2d");
                  context.fillStyle = "blue";
                  context.fillRect(10, 10, 50, 50);
                  context.globalCompositeOperation = compositing;
                  context.fillStyle = "red";
                  context.fillRect(30, 30, 50, 50);
            }

            drawScreen("copy", 1);
            drawScreen("destination-atop", 2);
            drawScreen("destination-in", 3);
            drawScreen("destination-out", 4);
            drawScreen("destination-over", 5);
            drawScreen("lighter", 6);
            drawScreen("source-atop", 7);
            drawScreen("source-in", 8);
            drawScreen("source-out", 9);
            drawScreen("source-over", 10);
            drawScreen("xor", 11);
         }
      </script>
      <style>
         td {
            border: 1px solid #000000;
         }
      </style>
</head>
<body>
      <div style="position: absolute; top: 50px; left: 50px; border:1px solid #0000ff">
         <table>
            <tr>
                  <td><canvas id="c1"></canvas></td>
                  <td><canvas id="c2"></canvas></td>
                  <td><canvas id="c3"></canvas></td>
                  <td><canvas id="c4"></canvas></td>
                  <td><canvas id="c5"></canvas></td>
            </tr>
            <tr>
                  <td><canvas id="c6"></canvas></td>
                  <td><canvas id="c7"></canvas></td>
                  <td><canvas id="c8"></canvas></td>
                  <td><canvas id="c9"></canvas></td>
                  <td><canvas id="c10"></canvas></td>
                  <td><canvas id="c11"></canvas></td>
            </tr>
         </table>
      </div>
</body>
</html>

实例效果图：从左到右、从上到下，分别表示1，2，……11，这11种类型生成的效果图

Transformations 变换

变换的本质就是指从数学（矩阵）的角度来调整图形的物理属性；当然，这是原理；我们在实现的时候，只需要调用方法即可；

移动translate、旋转rotation 、缩放scale 、变换transforms

Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is called

只有在应用context.setTransform()方法后，对图形的各种变换才能生效；