實(shí)例

使用不同的 globalCompositeOperation 值繪制矩形。紅色矩形是目標(biāo)圖像。藍(lán)色矩形是源圖像：

     source-over             destination-over

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 Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 globalCompositeOperation 屬性。

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

定義和用法

globalCompositeOperation 屬性設(shè)置或返回如何將一個(gè)源（新的）圖像繪制到目標(biāo)（已有）的圖像上。

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

目標(biāo)圖像 = 您已經(jīng)放置在畫布上的繪圖。

屬性值

更多實(shí)例

所有 globalCompositeOperation 屬性值：

親自試一試