HTML5 Canvas 实现可叠加的动态背景（Matrix 效果）完整教程-html教程-PHP中文网

HTML5 Canvas 实现可叠加的动态背景（Matrix 效果）完整教程

本文详解如何将 canvas 动态背景（如 matrix 数字雨）正确设为网页底层背景，同时确保文字、图片等前景内容清晰可见不被遮挡或透明化，核心在于 dom 层级控制、css 定位与 z-index 的协同配置。

本文详解如何将 canvas 动态背景（如 matrix 数字雨）正确设为网页底层背景，同时确保文字、图片等前景内容清晰可见不被遮挡或透明化，核心在于 dom 层级控制、css 定位与 z-index 的协同配置。

在使用 HTML5

✅ 正确的 DOM 结构分层原则

Canvas 背景必须作为视觉底层存在，但不能依赖 z-index: -1 这种“负向 hack”——它在部分浏览器中不可靠，且易与父容器的 stacking context 冲突。推荐采用显式层级容器隔离：

  <!-- 背景层：固定定位 + 全屏覆盖 -->
  <div id="bg-layer" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1;">
    <canvas id="background_canvas"></canvas>
</div>

  <!-- 前景层：相对定位 + 显式高 z-index -->
  <div id="fg-layer" style="position: relative; z-index: 10; margin: 0 auto; max-width: 1200px; padding: 2rem;">
    <h1 style="color: #0f0; text-shadow: 0 0 8px #0a0;">Welcome to My Site</h1>
    @@##@@
  </div>

关键点说明：

#bg-layer 使用 position: fixed 确保随滚动始终铺满视口，pointer-events: none 保证鼠标事件穿透至前景层；
#fg-layer 必须声明 position: relative（或 absolute/sticky），否则 z-index 无效；
z-index: 10 明确高于背景层（z-index: 1），形成稳定层叠顺序。

✅ Canvas 初始化与性能优化（适配高清屏）

原始代码中 canvas.width/height 直接赋值 window.innerWidth/Height，在 Retina 屏上会导致模糊。应结合 devicePixelRatio 提升绘制精度：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

const canvas = document.getElementById('background_canvas');
const ctx = canvas.getContext('2d');

// 高清适配：设置真实像素尺寸
function resizeCanvas() {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = window.innerWidth * dpr;
  canvas.height = window.innerHeight * dpr;
  ctx.scale(dpr, dpr); // 缩放绘图上下文，保持逻辑坐标不变
  canvas.style.width = `${window.innerWidth}px`;
  canvas.style.height = `${window.innerHeight}px`;
}

resizeCanvas();
window.addEventListener('resize', resizeCanvas);

// Matrix 核心逻辑（精简优化版）
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const nums = '0123456789';
const alphabet = katakana + latin + nums;
const fontSize = 16;
const columns = Math.floor(window.innerWidth / fontSize);
const drops = Array(columns).fill(0);

function draw() {
  // 半透明黑底实现“拖尾”效果（非清空，而是低透明度覆盖）
  ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.font = `${fontSize}px monospace`;
  ctx.fillStyle = '#0f0';
  ctx.textBaseline = 'top';

  for (let i = 0; i  canvas.height && Math.random() > 0.975) {
      drops[i] = 0;
    }
    drops[i]++;
  }
}

// 使用 requestAnimationFrame 替代 setInterval，更流畅且节电
function animate() {
  draw();
  requestAnimationFrame(animate);
}
animate();

⚠️ 注意事项：

避免 setInterval：requestAnimationFrame 与屏幕刷新率同步，性能更优；

禁用抗锯齿（可选）：若需锐利像素风格，添加 ctx.imageSmoothingEnabled = false;；

内存友好：drops 数组复用，不重复 new Array()；

移动端适配：在 resizeCanvas 中监听 orientationchange，确保横竖屏切换正常。

✅ CSS 样式关键规则（防坑指南）

以下样式必须严格应用，缺一不可：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow-x: hidden; /* 防止横向滚动条干扰 */
  background-color: #000; /* 底层 fallback 背景色 */
}

#bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none; /* 关键！允许点击穿透 */
}

#background_canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#fg-layer {
  position: relative;
  z-index: 10; /* 必须 ≥ 2，且高于 bg-layer */
  color: #0f0;
  text-shadow: 0 0 6px rgba(0, 255, 0, 0.7);
}

特别强调：pointer-events: none 是解决“按钮不可点击、链接无响应”的终极方案——它让 Canvas 完全不参与事件捕获，所有用户交互由前景 DOM 自然接收。