如何实现交互式HTML Canvas置于文本后方且保持文本可点击？

我正在开发一个网页，需要将带有画笔绘制效果的交互式HTML Canvas置于文本内容后方。如何实现该布局，使得前方的文本及链接保持可点击，同时Canvas可见且可交互？是否有推荐的HTML/CSS策略或JavaScript技术？

问题分析与解决方案 #

现有代码存在两个核心问题：

1. 文本容器未设置定位，z-index不生效，可能导致层级错乱；
2. 上层文本会拦截鼠标事件，导致Canvas无法接收绘制触发的事件。

核心实现策略 #

1. 层级控制（CSS）

• 给文本容器（p标签）设置position: relative，配合z-index确保文本始终在Canvas上方；
• Canvas使用position: fixed占满整个视口，设置较低z-index作为背景层；
• 给文本容器设置pointer-events: none，让鼠标事件穿透到下层Canvas，但单独给链接设置pointer-events: auto，保留链接的可点击性。

2. 事件处理（JavaScript）

保留原有的Canvas绘制逻辑即可，因为事件已能穿透到Canvas，无需额外修改事件绑定。同时新增窗口大小适配逻辑，保证Canvas始终覆盖视口。

修正后的完整代码 #

HTML #

<p>Lorem ipsum dolor sit amet consectetur adipiscing elit ut scelerisque, tempor nec mattis sapien sed nostra litora. Nunc aliquam dignissim euismod egestas suscipit <a>CLICKABLE LINK</a> suspendisse cubilia dapibus, habitant ullamcorper vehicula mollis
  montes odio varius a, sed potenti condimentum augue natoque senectus erat libero sagittis, litora purus <a>CLICKABLE LINK</a> mauris justo neque hac. Dictum convallis bibendum nam habitant justo sociis mollis feugiat malesuada, leo molestie sem natoque
  facilisis fames torquent sociosqu conubia, <a>CLICKABLE LINK</a> duis senectus vivamus phasellus tortor consequat nulla. Justo sociosqu vestibulum hendrerit odio senectus curabitur ante neque primis urna aliquam eleifend consequat <a>CLICKABLE LINK</a>  tortor, facilisis hac mi habitasse egestas vehicula in vel lacus luctus fringilla suspendisse nostra. Placerat imperdiet ullamcorper nostra penatibus cras varius, primis tortor leo sociis pharetra, pretium felis ac faucibus sagittis. Penatibus sed <a>CLICKABLE LINK</a>  egestas sem facilisis tempor lacinia viverra, consequat semper justo suspendisse porttitor conubia feugiat nisl euismod, posuere tempus libero augue morbi ac ut.</p>
<canvas id="canvas" class="drawing-canvas"></canvas>

CSS #

.drawing-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
}

p {
  position: relative;
  z-index: 2;
  pointer-events: none;
  padding: 20px;
  font-size: 16px;
  line-height: 1.6;
}

a {
  font-size: 20px;
  text-decoration: underline;
  cursor: pointer;
  pointer-events: auto;
  color: #2196F3;
}

JavaScript #

document.addEventListener('DOMContentLoaded', (event) => {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  
  // 适配窗口大小变化
  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);

  ctx.strokeStyle = '#FFC0CB';
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
  ctx.lineWidth = 90;
  ctx.shadowBlur = 30;
  ctx.shadowColor = '#FFC0CB';

  let isDrawing = false;
  let lastX = 0;
  let lastY = 0;

  function draw(e) {
    if (!isDrawing) return;
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    [lastX, lastY] = [e.offsetX, e.offsetY];
  }

  canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
  });

  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseup', () => isDrawing = false);
  canvas.addEventListener('mouseout', () => isDrawing = false);
});

内容的提问来源于stack exchange，提问作者anywhereseason