使用HTML5畫布（Canvas）模擬圖層（Layers）效果
在圖形處理和計算機圖形學中，圖層（Layers）是指將圖像分成不同的可獨立編輯、組合和控制的部分的技術或概念。每個圖層都可以包含不同的圖形元素、效果、文本或其他可視化內容。圖層的使用使得圖像的創建、編輯和處理更加靈活和高效。通過將圖像分割成多個圖層，可以對每個圖層進行單獨的操作，而不會影響到其他圖層。這意味著可以單獨編輯和修改每個圖層上的內容，添加、刪除或調整圖層的順序，以及應用不同的效果和轉換。
HTML5的<canvas>元素本身不直接支持圖層（Layers）的概念。<canvas>是一個二維的畫布，你可以在上面繪制路徑、盒子、圓圈、字符以及添加（加載）圖像，但它本質上是一個像素的畫布。
如果你需要圖層效果，怎么辦？有幾種方法可以間接模擬實現：
使用多個<canvas>元素模擬圖層
在單個<canvas>元素上模擬圖層
☆使用多個<canvas>元素模擬圖層
在HTML中創建多個<canvas>元素。每個畫布元素可以視為一個獨立的圖層，它們可以通過CSS的定位屬性進行重疊和定位。
下面這個示例將展示如何使用兩個不同的<canvas>元素（分別代表兩個圖層）來繪制不同的圖形：
<!DOCTYPE html>
<html>
<head><title>Canvas Layers Example_1</title><style>#canvasContainer {position: relative;width: 400px;height: 400px;}canvas {position: absolute;left: 0;top: 0;}</style>
</head>
<body><div id="canvasContainer"><canvas id="layer1" width="400" height="400"></canvas><canvas id="layer2" width="400" height="400"></canvas></div><script>// 獲取兩個canvas元素及其繪圖上下文const layer1 = document.getElementById('layer1');const ctx1 = layer1.getContext('2d');const layer2 = document.getElementById('layer2');const ctx2 = layer2.getContext('2d');// 在layer1上繪制一個紅色的矩形ctx1.fillStyle = 'red';ctx1.fillRect(50, 50, 200, 200);// 在layer2上繪制一個半透明的藍色圓形ctx2.fillStyle = 'rgba(0, 0, 255, 0.5)';ctx2.beginPath();ctx2.arc(200, 200, 100, 0, Math.PI * 2);ctx2.fill();</script>
</body>
</html>
在這個示例中，layer1是我們的第一個圖層，我們在這個圖層上繪制了一個紅色的矩形。layer2是第二個圖層，我們在這個圖層上繪制了一個半透明的藍色圓形。由于我們使用CSS將兩個<canvas>元素重疊，并且圓形是半透明的，所以你可以看到這兩個圖形是如何相互覆蓋的，從而實現了圖層的效果。
運行效果：
☆在單個<canvas>元素上模擬圖層
在單個<canvas>元素上使用繪制順序來模擬圖層效果。通過控制繪制的順序，后繪制的元素會覆蓋先繪制的元素，從而實現圖層效果。
例1、先看一個簡單的例子
<!DOCTYPE html>
<html>
<head><title>Single Canvas Layers Example</title><canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"></canvas>
</head>
<body><script>var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');// 第一層: 紅色矩形ctx.fillStyle = 'red';ctx.fillRect(10, 10, 200, 200);// 第二層: 藍色矩形ctx.fillStyle = 'blue';ctx.fillRect(50, 50, 200, 200);</script>
</body>
</html>
運行效果：
例2、一個簡單的動畫例子
<!DOCTYPE html>
<html>
<head><title>Single Canvas Layers Example_2</title></head>
<body><canvas id="myCanvas" width="400" height="400"></canvas><script>document.addEventListener('DOMContentLoaded', function() {const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');let circleX = 50; // 初始圓形的X坐標let speedX = 2; // 圓形的移動速度function draw() {// 清除整個畫布ctx.clearRect(0, 0, canvas.width, canvas.height);// 繪制背景層ctx.fillStyle = 'lightblue';ctx.fillRect(0, 0, canvas.width, canvas.height);// 繪制移動的圓形（模擬的前景層）ctx.fillStyle = 'red';ctx.beginPath();ctx.arc(circleX, 200, 30, 0, Math.PI * 2);ctx.fill();// 更新圓形的位置circleX += speedX;if (circleX > canvas.width || circleX < 0) {speedX = -speedX; // 當圓形觸及邊界時反轉方向}requestAnimationFrame(draw); // 請求下一幀繼續繪制}draw(); // 開始繪制});</script>
</body>
</html>
在這個示例中，我們首先定義了一個<canvas>元素并在頁面加載完成后獲取它的引用。我們定義了一個draw函數，該函數首先清除整個<canvas>，然后繪制一個背景層和一個移動的圓形。背景層是靜態的，而圓形會根據其x坐標的值在畫布上移動。通過在每一幀更新圓形的位置并重新繪制整個<canvas>，我們模擬了兩個獨立的圖層：一個用于靜態背景，另一個用于動態前景。
其中，document.addEventListener('DOMContentLoaded', function() { ...})的語法和作用如下：
document: 指的是當前網頁的文檔對象。
addEventListener: 是一個方法，用于向指定元素添加一個事件監聽器，這個方法有幾個參數
第一個參數 表示事件的類型，這里是'DOMContentLoaded'，'DOMContentLoaded'事件會在HTML文檔被完全加載和解析完成后立即觸發，不需要等待樣式表、圖像和子框架的加載。
第二個參數是一個匿名函數，事件發生時應該執行的代碼。
運行效果：
