在HTML5中，我們可以使用canvas標(biāo)簽來繪制各種各樣的圖形。有時(shí)候我們需要將兩個(gè)圖形疊加在一起，這時(shí)候可以使用一些簡(jiǎn)單的代碼來實(shí)現(xiàn)。

// 創(chuàng)建第一個(gè)圖形
var canvas1 = document.getElementById("canvas1");
var ctx1 = canvas1.getContext("2d");
ctx1.fillStyle = "red";
ctx1.fillRect(10, 10, 100, 100);
// 創(chuàng)建第二個(gè)圖形，注意這里我故意將第二個(gè)圖形繪制在第一個(gè)圖形之上
var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
ctx2.fillStyle = "green";
ctx2.fillRect(30, 30, 100, 100);
// 將兩個(gè)圖形疊加起來
ctx2.globalCompositeOperation = "source-over";
ctx2.drawImage(canvas1, 0, 0);

上述代碼的實(shí)現(xiàn)步驟為：首先我們先創(chuàng)建兩個(gè)canvas標(biāo)簽，然后在第一個(gè)canvas標(biāo)簽上繪制一個(gè)紅色的正方形，接著在第二個(gè)canvas標(biāo)簽上繪制一個(gè)綠色的正方形，但是我們故意將第二個(gè)圖形放在了第一個(gè)圖形的上層。最后，我們通過使用ctx2的globalCompositeOperation屬性將第一個(gè)圖形繪制在了第二個(gè)圖形之上，實(shí)現(xiàn)了兩個(gè)圖形的重疊效果。