最新的Web開發教程
 

HTML canvas globalCompositeOperation Propery

<畫布對象

例

繪製使用兩種不同的globalCompositeOperation值的矩形。 紅色矩形的destination images 。 藍色矩形是source images ：

源過
目的地在
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);
試一試»

瀏覽器支持

在表中的數字規定，完全支持該財產瀏覽器版本。

屬性
globalCompositeOperation 4 9 3.6 4 10.1

定義和用法

源如何掌握globalCompositeOperation屬性設置或返回(new)圖像被繪製到一個目的地(existing)圖像。

源圖像=附圖您將要放置到畫布上。

目標圖像=那些已經放置在畫布上的圖。

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

屬性值

值 描述 播放
source-over 默認。 顯示在目標圖像的源圖像 播放 ”
source-atop 顯示在目標圖像的頂部的源圖像 。 所述的部分source image是外部destination image中未示出 播放 ”
source-in 顯示到目的地圖像的源圖像 。 所述的唯一的部分source image即內部的destination image被示出，並且destination image是透明的 播放 ”
source-out 顯示源圖像從目標圖像 。 所述的唯一的部分source image是OUTSIDE的destination image被示出，並且destination image是透明的 播放 ”
destination-over 顯示目標圖像在源圖像 播放 ”
destination-atop 顯示在源圖像上的目標圖像 。 所述的部分destination image是外source image中未示出 播放 ”
destination-in 顯示源圖像 目標圖像 。 所述的唯一的部分destination image即內部的source image被示出，並且source image是透明的 播放 ”
destination-out 顯示目的地形象出來的源圖像 。 所述的唯一的部分destination image即OUTSIDE的source image被示出，並且source image是透明的 播放 ”
lighter 顯示源圖像 + 目標圖像 播放 ”
copy 顯示源圖像。 目標圖像被忽略 播放 ”
xor 源圖像是通過使用異或與目標圖像相組合 播放 ”

例

所有掌握globalCompositeOperation屬性值：

試一試»
<畫布對象