如何让Canvas元素在屏幕缩放时实现响应式适配？

你的Matrix动画Canvas在窗口尺寸变化时无法自动适配，核心原因是只在页面初始化时设置了一次Canvas的宽高和列数，没有监听窗口大小变化的事件来更新这些参数。

修复步骤： #

1. 把初始化Canvas尺寸、计算列数、生成下落点数组的逻辑抽成独立函数，方便重复调用
2. 给window添加resize事件监听，每次窗口尺寸变化时重新初始化Canvas参数
3. 可选：给resize事件添加防抖处理，避免窗口拖动时频繁触发更新

修改后的完整代码： #

HTML

<canvas id="bglitch"></canvas>

CSS

* {
  margin: 0;
  background-color: #010b13;
  overflow: hidden;
}
#bglitch {
  opacity: 0.5;
  z-index: -10;
  position: fixed; /* 加上定位确保Canvas铺满视口 */
  top: 0;
  left: 0;
}

JavaScript

var bglitch = document.getElementById("bglitch");
var ctx = bglitch.getContext("2d");
var matrix = "アィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽ";
matrix = matrix.split("");
var font_size = 24;
var drops = [];

// 初始化/重置Canvas参数的函数
function initCanvas() {
  bglitch.height = window.innerHeight;
  bglitch.width = window.innerWidth;
  var columns = bglitch.width / font_size;
  // 重置下落点数组
  drops = [];
  for(var x = 0; x < columns; x++) {
    drops[x] = 1;
  }
}

function draw() {
  ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
  ctx.fillRect(0, 0, bglitch.width, bglitch.height);
  ctx.fillStyle = "#f4427d";
  ctx.font = font_size + "px arial";
  for(var i = 0; i < drops.length; i++){
    var text = matrix[Math.floor(Math.random()*matrix.length)];
    ctx.fillText(text, i*font_size, drops[i]*font_size);
    if(drops[i]*font_size > bglitch.height && Math.random() > 0.975) {
      drops[i] = 0;
    }
    drops[i]++;
  }
}

// 首次初始化
initCanvas();
// 监听窗口resize事件，添加防抖避免频繁触发
window.addEventListener('resize', function() {
  clearTimeout(this.resizeTimer);
  this.resizeTimer = setTimeout(initCanvas, 200);
});

setInterval(draw, 35);

关键修改说明： #

• 新增initCanvas函数统一处理Canvas的尺寸设置和下落点数组初始化，窗口变化时只需调用这个函数即可
• CSS里给Canvas加上position: fixed，确保它始终铺满视口
• 给resize事件添加了200ms的防抖，减少不必要的性能消耗

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