HTML5 畫布合成 · ZetCode 中文系列教程

# HTML5 畫布合成 > 原文： [https://zetcode.com/gfx/html5canvas/compositing/](https://zetcode.com/gfx/html5canvas/compositing/) 在 HTML5 `canvas`教程的這一部分中，我們使用合成操作。合成是將來自不同來源的視覺元素組合成單個圖像。它們被用來創建一種幻覺，即所有這些元素都是同一場景的一部分。合成在電影行業中被廣泛使用來創造人群，否則將是昂貴或不可能創造的整個新世界。本教程的[形狀章節](../shapes/#three)中的三個圓圈示例使用`destination-out`合成操作來創建新形狀。 ## 合成操作 [developer.mozilla.org](https://developer.mozilla.org) 在其[合成和剪裁](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing)一章中列出了 26 種不同的合成操作。我們在下一個代碼示例中展示其中的一些。假設我們要在畫布上繪制兩個對象。繪制的第一個對象稱為目標，第二個稱為源。 `canvas`上下文的`globalCompositeOperation`屬性確定如何將這兩個對象混合在一起。例如，在`source-over`規則（這是默認的構圖操作）中，新形狀會在現有形狀的頂部繪制。 `compositing.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 Canvas compositing operations</title> <style> canvas {border: 1px solid brown} select {vertical-align:top} </style> <script> var canvas; var ctx; var value = 'source-over'; var operations = ['source-over', 'source-in', 'source-out', 'source-atop', 'destination-over', 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'copy', 'xor']; function init() { canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d'); draw(); } function getOperation(sel) { value = operations[sel.value]; draw(); } function draw() { ctx.save(); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'blue'; ctx.fillRect(20, 20, 40, 40); ctx.globalCompositeOperation = value; ctx.fillStyle = 'green'; ctx.fillRect(25, 25, 40, 40); ctx.restore(); } </script> </head> <body onload="init();"> <canvas id="myCanvas" width="150" height="100"> </canvas> <select id="opers" onchange="getOperation(this)"> <option value="0" selected="selected">source-over</option> <option value="1">source-in</option> <option value="2">source-out</option> <option value="3">source-atop</option> <option value="4">destination-over</option> <option value="5">destination-in</option> <option value="6">destination-out</option> <option value="7">destination-atop</option> <option value="8">lighter</option> <option value="9">copy</option> <option value="10">xor</option> </select> </body> </html> ``` 在示例中，我們有一個合成操作的下拉列表。所選操作將應用于兩個重疊矩形的圖形。 ```js var operations = ['source-over', 'source-in', 'source-out', 'source-atop', 'destination-over', 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'copy', 'xor']; ``` `operations`數組包含 11 個合成操作。 ```js function init() { canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d'); draw(); } ``` 在`init()`函數內部，我們獲得對`canvas`對象及其繪制上下文的引用。 ```js ctx.save(); ... ctx.restore(); ``` 每次我們從下拉列表中選擇一個選項時，都會使用新的合成操作重新繪制畫布。為了獲得正確的結果，我們必須在`save()`和`restore()`方法之間放置繪圖代碼。這樣，操作彼此隔離。 ```js ctx.clearRect(0, 0, canvas.width, canvas.height); ``` `clearRect()`方法清除先前的輸出。 ```js ctx.globalCompositeOperation = value; ``` `globalCompositeOperation`設置為從下拉列表中選擇的值。 ![Compositing](https://img.kancloud.cn/59/a4/59a4b65faf2e1c840558d849954aa990_343x242.jpg) 圖：合成上圖顯示了`xor`合成操作。在此規則中，將形狀透明化，使其在其他地方重疊并正常繪制。在 HTML5 畫布教程的這一部分中，我們討論了圖像合成。