HTML Canvas 实现一个双图层效果，读取图片作为底部图层，顶部图层作为蒙版

好的，以下是一个实现双图层效果的简单代码示例：

HTML部分：

<canvas id="myCanvas"></canvas>

JavaScript部分：

// 获取canvas元素和2D上下文对象
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 创建底部图层
var bottomLayer = new Image();
bottomLayer.src = "bottomLayer.jpg"; // 请替换为你的底部图层图片地址
bottomLayer.onload = function() {
  // 图片加载完成后将其绘制到canvas上
  ctx.drawImage(bottomLayer, 0, 0);
};

// 创建顶部图层
var topLayer = new Image();
topLayer.src = "topLayer.png"; // 请替换为你的顶部图层图片地址
topLayer.onload = function() {
  // 图片加载完成后将其设置为蒙版
  ctx.globalCompositeOperation = "destination-atop";
  ctx.drawImage(topLayer, 0, 0);
};

在这个示例中，我们首先获取了canvas元素和2D上下文对象。然后，我们创建了一个底部图层和一个顶部图层，并将它们分别加载到canvas上。底部图层是一个图片，我们使用`drawImage()`方法将其绘制到canvas上。顶部图层也是一个图片，但我们将其设置为蒙版，使用`globalCompositeOperation`属性设置为`destination-atop`，并将其绘制到canvas上。这个属性的作用是将绘制的内容限制在已有内容的范围内，即只在底部图层上绘制。这样，我们就可以实现一个双图层效果，底部图层作为背景，顶部图层作为蒙版。