Latest web development tutorials

HTML canvas globalCompositeOperation 屬性

HTML canvas 參考手冊 HTML canvas參考手冊

實例

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

source-over
destination-over
YourbrowserdoesnotsupporttheHTML5canvastag.

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);

嘗試一下»

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 和Safari 支持globalCompositeOperation 屬性。

注意： Internet Explorer 8及之前的版本不支持<canvas>元素。

定義和用法

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

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

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

默認值： source-over
JavaScript 語法： context.globalCompositeOperation="source-in";

屬性值

值 描述
source-over 默认。在目标图像上显示源图像 。
source-atop 在目标图像顶部显示源图像 。 源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像 。只有目标图像之内的源图像部分会显示， 目标图像是透明的。
source-out 在目标图像之外显示源图像 。只有目标图像之外的源图像部分会显示， 目标图像是透明的。
destination-over 在源图像上显示目标图像 。
destination-atop 在源图像顶部显示目标图像 。 目标图像位于源图像之外的部分是不可见的。
destination-in 在源图像中显示目标图像 。只有源图像之内的目标图像部分会被显示， 源图像是透明的。
destination-out 在源图像之外显示目标图像 。只有源图像之外的目标图像部分会被显示， 源图像是透明的。
lighter 显示源图像 + 目标图像 。
copy 显示源图像 。忽略目标图像 。
xor 使用异或操作对源图像与目标图像进行组合。

實例

所有globalCompositeOperation 屬性值：


嘗試一下»

HTML canvas 參考手冊 HTML canvas參考手冊