原文： https://zetcode.com/gfx/html5canvas/compositing/

在 HTML5 canvas教程的这一部分中，我们使用合成操作。

合成是将来自不同来源的视觉元素组合成单个图像。 它们被用来创建一种幻觉，即所有这些元素都是同一场景的一部分。 合成在电影行业中被广泛使用来创造人群，否则将是昂贵或不可能创造的整个新世界。

本教程的形状章节中的三个圆圈示例使用destination-out合成操作来创建新形状。

合成操作

developer.mozilla.org 在其合成和剪裁一章中列出了 26 种不同的合成操作。 我们在下一个代码示例中展示其中的一些。

假设我们要在画布上绘制两个对象。 绘制的第一个对象称为目标，第二个称为源。 canvas上下文的globalCompositeOperation属性确定如何将这两个对象混合在一起。 例如，在source-over规则（这是默认的构图操作）中，新形状会在现有形状的顶部绘制。

compositing.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 Canvas compositing operations</title>  
  5. <style>
  6.     canvas {border: 1px solid brown}
  7.     select {vertical-align:top}
  8. </style>  
  9. <script>
  10.     var canvas;
  11.     var ctx;
  12.     var value = 'source-over';
  13.     var operations = ['source-over', 'source-in', 'source-out',
  14.         'source-atop', 'destination-over', 'destination-in', 'destination-out',
  15.         'destination-atop', 'lighter', 'copy', 'xor'];
  17.     function init() {
  19.         canvas = document.getElementById('myCanvas');
  20.         ctx = canvas.getContext('2d');
  21.         draw();    
  22.     }
  24.     function getOperation(sel) {
  26.         value = operations[sel.value];
  27.         draw();
  28.     }
  30.     function draw() {
  32.       ctx.save();
  33.       ctx.clearRect(0, 0, canvas.width, canvas.height);
  34.       ctx.fillStyle = 'blue';
  35.       ctx.fillRect(20, 20, 40, 40);
  37.       ctx.globalCompositeOperation = value; 
  39.       ctx.fillStyle = 'green';
  40.       ctx.fillRect(25, 25, 40, 40);
  41.       ctx.restore();
  42.     }    
  43. </script>
  44. </head>
  46. <body onload="init();">
  48.     <canvas id="myCanvas" width="150" height="100">
  49.     </canvas>
  51.     <select id="opers" onchange="getOperation(this)">
  52.       <option value="0" selected="selected">source-over</option>
  53.       <option value="1">source-in</option>
  54.       <option value="2">source-out</option>
  55.       <option value="3">source-atop</option>
  56.       <option value="4">destination-over</option>
  57.       <option value="5">destination-in</option>
  58.       <option value="6">destination-out</option>
  59.       <option value="7">destination-atop</option>
  60.       <option value="8">lighter</option>
  61.       <option value="9">copy</option>
  62.       <option value="10">xor</option>
  63.     </select> 
  65. </body>
  66. </html>

在示例中，我们有一个合成操作的下拉列表。 所选操作将应用于两个重叠矩形的图形。

  1. var operations = ['source-over', 'source-in', 'source-out',
  2.     'source-atop', 'destination-over', 'destination-in', 'destination-out',
  3.     'destination-atop', 'lighter', 'copy', 'xor'];

operations数组包含 11 个合成操作。

  1. function init() {
  3.     canvas = document.getElementById('myCanvas');
  4.     ctx = canvas.getContext('2d');
  5.     draw();    
  6. }

在init()函数内部，我们获得对canvas对象及其绘制上下文的引用。

  1. ctx.save();
  2. ...
  3. ctx.restore();

每次我们从下拉列表中选择一个选项时，都会使用新的合成操作重新绘制画布。 为了获得正确的结果，我们必须在save()和restore()方法之间放置绘图代码。 这样，操作彼此隔离。

  1. ctx.clearRect(0, 0, canvas.width, canvas.height);

clearRect()方法清除先前的输出。

  1. ctx.globalCompositeOperation = value;

globalCompositeOperation设置为从下拉列表中选择的值。

HTML5 画布合成 - 图1

图：合成

上图显示了xor合成操作。 在此规则中，将形状透明化，使其在其他地方重叠并正常绘制。

在 HTML5 画布教程的这一部分中，我们讨论了图像合成。