如何让 HTML Canvas 随浏览器窗口自动缩放适配-html教程-PHP中文网

如何让 HTML Canvas 随浏览器窗口自动缩放适配

本文详解如何通过监听 resize 事件动态调整 Canvas 尺寸，并同步更新绘图逻辑（如雨滴动画列数、坐标计算等），确保画布始终铺满视口且动画不因尺寸变化而错乱或失效。

本文详解如何通过监听 `resize` 事件动态调整 canvas 尺寸，并同步更新绘图逻辑（如雨滴动画列数、坐标计算等），确保画布始终铺满视口且动画不因尺寸变化而错乱或失效。

在 Web 开发中，将

因此，正确做法是：在 JavaScript 中显式更新 Canvas 的 width 和 height 属性，并重置所有依赖尺寸的变量（如列数、雨滴位置数组等）。

以下是优化后的 background.js 核心代码（已整合 resize 响应逻辑）：

Markdown Canvas

将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。

下载

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

// 初始化画布尺寸
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

// 初始化雨滴状态（需在 resize 后重新计算）
let columns;
let rainDrops;

function initRaindrops() {
    columns = Math.floor(canvas.width / 16); // fontSize = 16
    rainDrops = Array(columns).fill(1);
}

// 初始设置
resizeCanvas();
initRaindrops();

// 监听窗口缩放事件
window.addEventListener('resize', () => {
    resizeCanvas();
    initRaindrops(); // 重置雨滴列数和初始位置
});

// 字符集与字体配置
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰゲジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const nums = '0123456789';
const alphabet = katakana + latin + nums;
const fontSize = 16;

// 动画主循环
function draw() {
    context.fillStyle = 'rgba(0, 0, 0, 0.05)';
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = '#0F0';
    context.font = `${fontSize}px Monocraft`; // 注意：CSS 中定义了 @font-face，此处需匹配字体名

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

// 启动动画
setInterval(draw, 30);

✅ 关键要点说明：

canvas.width/height 必须赋值为数值（如 window.innerWidth），不能使用 CSS 单位（如 '100vw'）；
resize 事件需同时更新 Canvas 像素尺寸和所有依赖该尺寸的变量（如 columns、rainDrops 数组）；
initRaindrops() 在每次 resize 后调用，避免旧数组长度与新宽度不匹配导致绘制异常（如空白列或越界访问）；
若使用自定义字体（如 Monocraft），确保 context.font 中的字体名与 @font-face 定义完全一致；
建议添加防抖（debounce）优化频繁触发的 resize 事件（尤其在拖拽窗口时），例如使用 setTimeout 缓存一次执行。

⚠️ 常见误区提醒：

❌ 错误：仅设置 canvas.style.width = '100%'; canvas.style.height = '100%' → 仅拉伸显示，不提升分辨率；
❌ 错误：未重置 rainDrops 数组 → 新宽度下列数变化，但数组长度不变，导致部分区域无雨滴或绘制溢出；
❌ 错误：在 resize 回调中遗漏 initRaindrops() → 动画逻辑仍按旧尺寸运行。

通过以上实现，Canvas 将真正响应浏览器窗口变化，保持清晰锐利的渲染效果与流畅稳定的动画表现。