HTML Canvs如何实现两个图层，给我完整的代码。我需要一个图层在底部读取图片，另一个图层作为蒙版在图片上，可以用画笔涂鸦，并且清空这个蒙版

好的，以下是实现两个图层的完整代码，其中一个图层在底部读取图片，另一个图层作为蒙版在图片上，可以用画笔涂鸦，并且清空这个蒙版：

HTML部分：

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

CSS部分：

#myCanvas {
  border: 1px solid #ccc;
}

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 = document.createElement("canvas");
topLayer.width = canvas.width;
topLayer.height = canvas.height;
var topLayerCtx = topLayer.getContext("2d");

// 给顶部图层添加画笔功能
var isDrawing = false;
var lastX, lastY;
topLayer.addEventListener("mousedown", function(e) {
  isDrawing = true;
  lastX = e.offsetX;
  lastY = e.offsetY;
});
topLayer.addEventListener("mousemove", function(e) {
  if (isDrawing) {
    topLayerCtx.beginPath();
    topLayerCtx.moveTo(lastX, lastY);
    topLayerCtx.lineTo(e.offsetX, e.offsetY);
    topLayerCtx.stroke();
    lastX = e.offsetX;
    lastY = e.offsetY;
  }
});
topLayer.addEventListener("mouseup", function() {
  isDrawing = false;
});

// 将顶部图层作为蒙版，绘制到底部图层上
function drawTopLayer() {
  ctx.save();
  ctx.globalCompositeOperation = "destination-out";
  ctx.drawImage(topLayer, 0, 0);
  ctx.restore();
}

// 清空顶部图层
function clearTopLayer() {
  topLayerCtx.clearRect(0, 0, topLayer.width, topLayer.height);
}

// 添加清空按钮
var clearBtn = document.createElement("button");
clearBtn.innerHTML = "Clear";
clearBtn.addEventListener("click", function() {
  clearTopLayer();
  drawTopLayer();
});

// 将canvas和清空按钮添加到页面中
var container = document.createElement("div");
container.appendChild(canvas);
container.appendChild(clearBtn);
document.body.appendChild(container);

在这个示例中，我们首先获取了canvas元素和2D上下文对象。然后，我们创建了一个底部图层和一个顶部图层。底部图层是一个图片，我们使用`drawImage()`方法将其绘制到canvas上。顶部图层是一个空的canvas元素，我们使用它来实现蒙版和画笔功能。我们给顶部图层添加了`mousedown`、`mousemove`和`mouseup`事件监听器，以实现画笔功能。当用户在顶部图层上作画时，我们将其绘制到canvas上，形成蒙版效果。当用户点击清空按钮时，我们清空顶部图层并重新绘制蒙版到canvas上，以清除之前的涂鸦。