Canvas globalCompositeOperation 屬性
示例
繪製 2 個矩形。紅色矩形是目標。藍色矩形是源。
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "red";
ctx.fillRect(150, 20, 75, 50);
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "blue";
ctx.fillRect(180, 50, 75, 50);
自己動手試一試 »
描述
globalCompositeOperation 屬性設定或返回源如何繪製在目標之上。
源 = 您即將繪製在 canvas 上的圖形。
目標 = 已繪製在 canvas 上的圖形。
語法
| context.globalCompositeOperation = "value" |
屬性值
| 值 | 描述 | 試一試 |
|---|---|---|
| source-over | 預設值 在目標之上顯示源 |
試一試 » |
| source-atop | 在目標頂部顯示源。源影像超出目標的部分不顯示。 | 試一試 » |
| source-in | 在目標內部顯示源。只顯示源中位於目標內部的部分，目標是透明的。 | 試一試 » |
| source-out | 在目標外部顯示源。只顯示源中位於目標外部的部分，目標是透明的。 | 試一試 » |
| destination-over | 在源之上顯示目標 | 試一試 » |
| destination-atop | 在源頂部顯示目標。目標超出源的部分不顯示。 | 試一試 » |
| destination-in | 在源內部顯示目標。只顯示目標中位於源內部的部分，源是透明的。 | 試一試 » |
| destination-out | 在源外部顯示目標。只顯示目標中位於源外部的部分，源是透明的。 | 試一試 » |
| lighter | 顯示源 + 目標 | 試一試 » |
| copy | 顯示源。目標被忽略。 | 試一試 » |
| xor | 源透過與目標進行異或操作來組合。 | 試一試 » |
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
globalCompositOperation 在所有現代瀏覽器中都受支援。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
