Canvas globalCompositeOperation 屬性

Canvas 參考手冊

定義和用法

globalCompositeOperation 屬性設置或返回如何將一個源（新的）圖像繪制到目標（已有）的圖像上。

源圖像 = 您打算放置到畫布上的繪圖。

目標圖像 = 您已經放置在畫布上的繪圖。

實例

例子 1

使用不同的 globalCompositeOperation 值繪制矩形。紅色矩形是目標圖像。藍色矩形是源圖像：

     source-over             destination-over

Your browser does not support the canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.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);

親自試一試

例子 2

所有 globalCompositeOperation 屬性值：

親自試一試

語法

context.globalCompositeOperation="source-in";

屬性值

值 描述
source-over 默認。在目標圖像上顯示源圖像。
source-atop 在目標圖像頂部顯示源圖像。源圖像位于目標圖像之外的部分是不可見的。
source-in 在目標圖像中顯示源圖像。只有目標圖像內的源圖像部分會顯示，目標圖像是透明的。
source-out 在目標圖像之外顯示源圖像。只會顯示目標圖像之外源圖像部分，目標圖像是透明的。
destination-over 在源圖像上方顯示目標圖像。
destination-atop 在源圖像頂部顯示目標圖像。源圖像之外的目標圖像部分不會被顯示。
destination-in 在源圖像中顯示目標圖像。只有源圖像內的目標圖像部分會被顯示，源圖像是透明的。
destination-out 在源圖像外顯示目標圖像。只有源圖像外的目標圖像部分會被顯示，源圖像是透明的。
lighter 顯示源圖像 + 目標圖像。
copy 顯示源圖像。忽略目標圖像。
xor 使用異或操作對源圖像與目標圖像進行組合。

技術細節

默認值： source-over

瀏覽器支持

表中的數字注明了首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注釋：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

Canvas 參考手冊