本文详解如何在窗口缩放时，为每个带有 `width`/`height` 属性的 `canvas>` 元素独立读取其 html 属性值，并将其精确同步到 css `style.width`/`style.height`，避免全局覆盖或返回 `0` 的常见错误。
在 Web 开发中，Canvas 元素的渲染行为依赖于两个关键维度：HTML 属性（width/height） 和 CSS 样式（style.width/style.height）。二者作用不同：HTML 属性定义画布的内部绘图坐标系分辨率（即像素数），而 CSS 样式仅控制其显示尺寸（可缩放）。若仅用 $('.canvas').attr("width") 获取值却未正确遍历每个元素，就会因 jQuery 链式调用返回首个匹配元素的属性、或在未初始化时读取为 undefined/0，导致控制台输出 0 0。
✅ 正确做法：逐个遍历 + 分离属性与样式
必须使用 .each() 显式遍历所有 .canvas 元素，对每个 DOM 节点单独操作：
window.addEventListener('resize', function() {
$('.canvas').each(function() {
// ✅ 正确读取当前 canvas 的 HTML width/height 属性（单位：数值，无 px）
const htmlWidth = this.width; // 推荐：直接访问 DOM 属性（等价于 getAttribute('width')）
const htmlHeight = this.height; // 更可靠，避免 jQuery .attr() 在某些上下文中的兼容性问题
console.log(`Canvas [${htmlWidth}×${htmlHeight}] → applying to style`);
// ✅ 正确设置内联样式（注意：必须带单位 'px'）
$(this).css({
'width': htmlWidth + 'px',
'height': htmlHeight + 'px'
});
// ✅ 替代方案（原生 JS，性能更优，支持 !important）
// this.style.setProperty('width', htmlWidth + 'px');
// this.style.setProperty('height', htmlHeight + 'px');
// this.style.setProperty('width', htmlWidth + 'px', 'important');
});
});⚠️ 关键注意事项
- 不要混用 attr() 与 css() 的语义：$(el).attr('width') 返回的是 HTML 属性值（如 "511"），而 $(el).css('width') 返回计算后的 CSS 值（如 "511px" 或 "auto"）。你需读取 HTML 属性来还原原始设计尺寸。
- this.width vs $(this).attr('width')：前者是标准 DOM 属性（自动转为数字），后者是字符串，且在某些 jQuery 版本中可能因解析异常返回 undefined。推荐优先使用 this.width / this.height。
- 样式单位不可省略：css('width', 511) 无效，必须写 css('width', '511px')；原生 style.width = '511px' 同理。
- 避免重复绑定事件：确保 addEventListener 只执行一次（例如放在文档加载完成后），否则 resize 事件会被多次触发，造成性能浪费和逻辑错乱。
? 进阶建议：响应式适配（可选）
若需 Canvas 在缩放时保持清晰（避免 CSS 拉伸模糊），应在设置 style.width/height 后，同步重置 canvas.width/canvas.height 以匹配显示尺寸（适用于简单缩放场景）：
// 在 .each() 内部追加：
const canvas = this;
const displayWidth = parseInt($(canvas).css('width'));
const displayHeight = parseInt($(canvas).css('height'));
canvas.width = displayWidth;
canvas.height = displayHeight;
// 注意：重置后需重绘内容（如 clearRect + redraw）通过以上方法，每个
