2D游戏双Canvas叠加遮挡问题：高分辨率文本Canvas遮蔽游戏Canvas

问题核心原因 #

你的代码中全局样式 * { background: #444444; } 会强制给所有元素（包括两个Canvas）设置灰色背景——这直接导致文本Canvas即使未绘制内容，也会用不透明的灰色背景完全遮挡底层游戏Canvas。此外，若文本Canvas错误继承了像素化渲染规则，还会导致文本模糊，但遮挡问题的根源是全局背景污染。

分步解决方案 #

1. 修正全局背景样式，排除Canvas #

将全局背景限制在body上，避免污染Canvas元素，确保Canvas默认透明特性生效：

/* 替换原全局*选择器样式 */
body {
  background: #444444;
  padding: 0;
  margin: 0;
  min-height: 100vh; /* 确保容器垂直铺满屏幕 */
}
#app canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent !important; /* 强制确保透明 */
}

2. 调整文本Canvas的创建参数 #

创建文本Canvas时传入pixelated: false，关闭像素化渲染，保证文本清晰锐利：

// 游戏Canvas（保留像素化）
const graphics = Graphics.make(400, 300, true);
// 文本Canvas（关闭像素化）
const texts = Graphics.make(800, 600, false);

// 按顺序添加到容器（后添加的Canvas默认层级更高，无需额外z-index）
element.appendChild(graphics.canvas);
element.appendChild(texts.canvas);

3. 明确控制层级（可选） #

如果需要更清晰的层级管理，可通过CSS指定z-index：

#app canvas.pixelated { /* 游戏Canvas */
  z-index: 1;
}
#app canvas:not(.pixelated) { /* 文本Canvas */
  z-index: 2;
}

4. 确保文本Canvas正确清空 #

在文本渲染循环中，每次绘制前必须用clearRect清空整个画布，保证未绘制区域完全透明：

// 文本渲染逻辑（放入游戏主循环）
function renderText() {
  const ctx = texts.ctx;
  // 清空整个文本Canvas
  ctx.clearRect(0, 0, texts.canvas.width, texts.canvas.height);
  
  // 绘制示例文本
  ctx.fillStyle = "#ffffff";
  ctx.font = "32px monospace";
  ctx.textAlign = "center";
  ctx.fillText("当前得分: 120", texts.canvas.width / 2, 50);
  
  requestAnimationFrame(renderText);
}
renderText();

完整修正后关键代码片段 #

调整后的HTML样式 #

<style>
body {
  background: #444444;
  padding: 0;
  margin: 0;
  min-height: 100vh;
}
body #app-wrap { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh;
}
#app {
  position: relative;
  width: min(99vw, calc(99vh * 16/9));
  aspect-ratio: 16/9;
  cursor: pointer;
}
#app canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent !important;
}
#app canvas.pixelated { 
  image-rendering: pixelated;
  z-index: 1;
}
#app canvas:not(.pixelated) {
  z-index: 2;
}
</style>

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