本文详解如何在窗口缩放时，遍历所有带 `.canvas` 类的 `
在 Web 开发中，canvas 的渲染行为依赖两个关键尺寸：html 属性（width/height）控制绘图上下文的逻辑分辨率（即“画布缓冲区大小”），而 css 样式（style.width/style.height）控制其在页面中的显示尺寸。若二者不匹配，会导致图像拉伸、模糊或比例失真。你遇到的 0 0 输出，根本原因是使用了 jquery 的 .attr(“width”) 在某些环境下可能返回空字符串或未解析值；更可靠的方式是直接访问原生 dom 元素的 width/height 属性（注意：这是数值型，非字符串）。
✅ 正确获取与同步尺寸的完整方案
以下代码在 resize 事件中，对每个 .canvas 元素独立处理，确保各自尺寸互不干扰：
window.addEventListener('resize', function() { $('.canvas').each(function() { // ✅ 正确获取 HTML width/height 属性（原生属性，返回数字） const canvas = this; // 原生 DOM 元素 const w = canvas.width; const h = canvas.height; console.log(`Canvas [${w}×${h}]: applying inline styles...`); // ✅ 精准设置 CSS 内联样式（带单位！） $(canvas).css({ 'width': w + 'px', 'height': h + 'px' }); // ✅ 或使用原生 style（性能略优，且支持 !important） // canvas.style.width = w + 'px'; // canvas.style.height = h + 'px'; // 若需强制覆盖其他样式：canvas.style.setProperty('width', w + 'px', 'important'); }); });⚠️ 关键注意事项
- 不要混用 .attr() 和 .prop()：.attr(“width”) 读取的是 HTML 字符串属性（可能为空或过时），而 .width 是 DOM 属性（实时、数值型），推荐始终使用后者。
- 单位不可省略：$(canvas).css(“width”, w) ❌（无效），必须写 w + “px” ✅。
- 批量操作需遍历：jQuery 选择器 $(‘.canvas’) 返回集合，必须用 .each() 分别处理每个元素，否则 $(this).attr() 会作用于整个集合而非单个实例。
- 避免重复绑定：确保 addEventListener 只执行一次（例如放在文档加载完成回调中），防止多次监听导致重复执行。
? 补充：动态适配场景示例
若需让 Canvas 显示尺寸随容器变化，但保持原始宽高比，可进一步扩展逻辑：
$('.canvas').each(function() { const canvas = this; const naturalW = canvas.width; const naturalH = canvas.height; const container = $(canvas).parent()[0]; if (container) { const containerW = container.clientWidth; const scale = Math.min(containerW / naturalW, 1); // 最大缩放到容器宽度 $(canvas).css({ 'width': (naturalW * scale) + 'px', 'height': (naturalH * scale) + 'px' }); } });通过以上方法，每个 Canvas 都能独立、准确地将其 HTML 属性尺寸映射为 CSS 显示尺寸，彻底解决“全部变 0”和“尺寸错乱”的问题，同时为后续 Canvas 绘图提供稳定、可控的渲染基础。
立即学习“前端免费学习笔记（深入）”；