使用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文档被完全加载和解析完成后立即触发，不需要等待样式表、图像和子框架的加载。
第二个参数是一个匿名函数，事件发生时应该执行的代码。
运行效果：
