创建两个canvas元素，只有后面那个canvas能起作用，但是希望两个都起作用

好的，以下是实现方式：

首先在 HTML 中创建两个 canvas 元素，如下所示：

<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

然后在 JavaScript 中获取这两个元素，并将第一个 canvas 的 CSS 属性 pointer-events 设置为 none，这样就能让第一个 canvas 的鼠标事件穿透到下面的元素，如下所示：

const canvas1 = document.getElementById('canvas1');
const canvas2 = document.getElementById('canvas2');

canvas1.style.pointerEvents = 'none';

这样就能让两个 canvas 都能起作用了。如果你希望第一个 canvas 也能接收鼠标事件，只需要将 pointer-events 设置为 auto 即可：

canvas1.style.pointerEvents = 'auto';

相关问题

创建两个canvas元素，只有后面那个canvas能起作用

好的，以下是实现方式：

首先在 HTML 中创建两个 canvas 元素，如下所示：

<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

然后在 JavaScript 中获取这两个元素，并将第一个 canvas 隐藏，第二个 canvas 显示出来，如下所示：

const canvas1 = document.getElementById('canvas1');
const canvas2 = document.getElementById('canvas2');

canvas1.style.display = 'none';
canvas2.style.display = 'block';

这样就能实现只有后面那个 canvas 能起作用了。

html创建两个canvas显示多张图片，结果只有后面一个canvas能够正常显示，但是希望两个都能正常显示

好的，以下是实现方式：

首先在 HTML 中创建两个 canvas 元素，如下所示：

<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

然后在 JavaScript 中获取这两个元素，并将它们的 CSS 属性 position 设置为 absolute，将它们覆盖在同一个容器上，如下所示：

const container = document.getElementById('container');
const canvas1 = document.getElementById('canvas1');
const canvas2 = document.getElementById('canvas2');

// 设置canvas1和canvas2的宽高等于容器的宽高
canvas1.width = container.offsetWidth;
canvas1.height = container.offsetHeight;
canvas2.width = container.offsetWidth;
canvas2.height = container.offsetHeight;

// 将canvas1和canvas2覆盖在容器上
canvas1.style.position = 'absolute';
canvas1.style.top = '0';
canvas1.style.left = '0';
canvas2.style.position = 'absolute';
canvas2.style.top = '0';
canvas2.style.left = '0';

// 获取图片资源并绘制到canvas上
const img1 = new Image();
img1.src = 'image1.jpg';
img1.onload = function() {
  const ctx1 = canvas1.getContext('2d');
  ctx1.drawImage(img1, 0, 0, canvas1.width, canvas1.height);
};

const img2 = new Image();
img2.src = 'image2.jpg';
img2.onload = function() {
  const ctx2 = canvas2.getContext('2d');
  ctx2.drawImage(img2, 0, 0, canvas2.width, canvas2.height);
};

这样就能让两个 canvas 都能正常显示了。如果你希望两个 canvas 的图片显示位置不同，只需在 drawImage 方法中调整 x 和 y 参数即可。