HTML Canvas 混合
globalCompositeOperation 屬性
globalCompositeOperation 屬性設定繪製新形狀時應用的混合操作型別。在前面的章節中，新圖形會相互疊加。我們可以使用 globalCompositeOperation 屬性來決定如何處理新圖形。
讓我們來看一些例子！
"source-over" 值
"source-over" 值是預設值。它會將新形狀繪製在現有內容之上。
示例
將 globalCompositeOperation 屬性設定為 "source-over"。然後繪製兩個重疊的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "source-over";
// 繪製兩個重疊的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己動手試一試 »
"source-out" 值
"source-out" 值僅在不與現有內容重疊的地方繪製新形狀。
示例
將 globalCompositeOperation 屬性設定為 "source-out"。然後繪製兩個重疊的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "source-out";
// 繪製兩個重疊的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己動手試一試 »
"destination-over" 值
"destination-over" 值會將新形狀繪製在現有內容後面。
示例
將 globalCompositeOperation 屬性設定為 "destination-over"。然後繪製兩個重疊的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "destination-over";
// 繪製兩個重疊的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己動手試一試 »
"destination-atop" 值
"destination-atop" 值將保留與新形狀重疊的現有內容。新形狀繪製在現有內容後面。
示例
將 globalCompositeOperation 屬性設定為 "destination-atop"。然後繪製兩個重疊的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "destination-atop";
// 繪製兩個重疊的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己動手試一試 »
"lighter" 值
"lighter" 值會在兩個形狀重疊的地方產生更亮的顏色。
示例
將 globalCompositeOperation 屬性設定為 "lighter"。然後繪製兩個重疊的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "lighter";
// 繪製兩個重疊的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己動手試一試 »
"copy" 值
"copy" 值只會顯示新形狀。
示例
將 globalCompositeOperation 屬性設定為 "copy"。然後繪製兩個重疊的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "copy";
// 繪製兩個重疊的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己動手試一試 »
"xor" 值
"xor" 值會在兩個形狀重疊的地方使它們透明，其他地方正常繪製。
示例
將 globalCompositeOperation 屬性設定為 "xor"。然後繪製兩個重疊的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "xor";
// 繪製兩個重疊的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己動手試一試 »
"multiply" 值
"multiply" 值會產生更暗的影像。將頂層畫素與底層畫素相乘。
示例
將 globalCompositeOperation 屬性設定為 "multiply"。然後繪製兩個重疊的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "multiply";
// 繪製兩個重疊的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己動手試一試 »
"screen" 值
"screen" 值會產生更亮的影像。將畫素反轉，然後相乘，再反轉（與 "multiply" 相反）。
示例
將 globalCompositeOperation 屬性設定為 "screen"。然後繪製兩個重疊的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "screen";
// 繪製兩個重疊的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己動手試一試 »
"darken" 值
"darken" 值會在兩個形狀重疊的地方產生更暗的顏色（保留兩個圖層的最暗畫素）。
示例
將 globalCompositeOperation 屬性設定為 "darken"。然後繪製兩個重疊的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "darken";
// 繪製兩個重疊的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己動手試一試 »
"lighten" 值
"lighten" 值會在兩個形狀重疊的地方產生更亮的顏色（保留兩個圖層的最亮畫素）。
示例
將 globalCompositeOperation 屬性設定為 "lighten"。然後繪製兩個重疊的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "lighten";
// 繪製兩個重疊的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己動手試一試 »
"hue" 值
"hue" 值採用頂層的色相，並保留底層的資訊和飽和度。
示例
將 globalCompositeOperation 屬性設定為 "hue"。然後繪製兩個重疊的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "hue";
// 繪製兩個重疊的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己動手試一試 »
"luminosity" 值
"luminosity" 值採用頂層的資訊，並保留底層的色相和飽和度。
示例
將 globalCompositeOperation 屬性設定為 "luminosity"。然後繪製兩個重疊的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "luminosity";
// 繪製兩個重疊的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己動手試一試 »
globalCompositeOperation 屬性值
globalCompositeOperation 屬性可以具有以下值
| 值 | 描述 |
|---|---|
| source-over | 預設值。將新形狀繪製在現有內容之上 |
| source-in | 僅在新形狀和現有內容重疊的地方繪製新形狀。其他地方均透明 |
| source-out | 僅在新形狀不與現有內容重疊的地方繪製新形狀 |
| source-atop | 僅在新形狀與現有內容重疊的地方繪製新形狀 |
| destination-over | 將新形狀繪製在現有內容後面 |
| destination-in | 保留新形狀和現有內容重疊的部分。其他地方均透明 |
| destination-out | 保留新形狀不重疊的現有內容 |
| destination-atop | 保留新形狀重疊的現有內容。新形狀繪製在現有內容後面 |
| lighter | 在兩個形狀重疊的地方產生更亮的顏色 |
| copy | 僅顯示新形狀 |
| xor | 形狀在重疊處透明，其他地方正常繪製 |
| multiply | 將頂層畫素與底層畫素相乘。結果是更暗的影像 |
| screen | 反轉畫素，然後相乘，再反轉。結果是更亮的影像（與 "multiply" 相反） |
| overlay | "multiply" 和 "screen" 的組合。底層顏色暗的部分更暗，亮的部分更亮 |
| darken | 保留兩個圖層的最暗畫素 |
| lighten | 保留兩個圖層的最亮畫素 |
| color-dodge | 用反轉的頂層畫素除以底層畫素 |
| color-burn | 用反轉的底層畫素除以頂層畫素，然後反轉結果 |
| hard-light | 類似於 "overlay"，但交換了頂層和底層 |
| soft-light | "hard-light" 的柔和版本 |
| difference | 從頂層畫素減去底層畫素（或反之），以始終得到正值 |
| exclusion | 類似於 "difference"，但對比度較低 |
| hue | 採用頂層的色相，並保留底層的資訊和飽和度 |
| saturation | 採用頂層的飽和度，並保留底層的資訊和色相 |
| color | 採用頂層的色相和飽和度，並保留底層的資訊 |
| luminosity | 採用頂層的資訊，並保留底層的色相和飽和度 |
