canvas的width/height属性控制绘图缓冲区分辨率，即实际像素网格大小；CSS宽高仅控制显示尺寸，不改变缓冲区，导致缩放失真；响应式需按devicePixelRatio同步设置缓冲区与CSS尺寸。
canvas 的 width/height 属性到底控制什么
它控制的是画布的「绘图缓冲区分辨率」，也就是浏览器实际分配的像素网格大小。比如 width="800" 和 height="600"，就表示内部有一块 800×600 的位图内存区域——所有坐标（ctx.fillRect(0,0,100,100)）、线条粗细（ctx.lineWidth = 1）、文字渲染、getImageData() 返回的数据量，全基于这个像素网格。
这个值不是“样式”，不能带单位："800px" 或 800.5 都会被忽略，回退到默认的 300×150；负数在 Chrome/Firefox 中也按 0 处理（IE 则直接失效）。
关键副作用：canvas.width = 800 会清空整个画布、重置上下文状态（变换矩阵、裁剪路径、当前字体等），这不是 bug，是重建缓冲区的必然行为。
为什么只用 CSS 设置宽高必然拉伸模糊
CSS 的 width 和 height 只控制 canvas 元素在页面中的显示框尺寸，不碰底层像素。浏览器只能对已有的低分辨率位图做插值缩放——就像把一张 300×150 的 JPEG 拉到 800×600 显示，再怎么优化也是模糊、锯齿、圆形变椭圆。
立即学习“前端免费学习笔记（深入）”；
常见失真现象包括：
-
ctx.lineWidth = 1画出来像 2 像素宽 - 鼠标点击坐标偏移几十像素（
event.clientX映射不到真实画布坐标） -
isPointInPath()判断失效 - 高 DPI 设备下（
window.devicePixelRatio === 2）问题翻倍：物理像素只有 150×75，却要填满 300×150 的显示区域
响应式场景下如何同步 HTML 属性与 CSS 尺寸
核心原则：先确定显示尺寸（CSS 框），再按设备像素比放大缓冲区，最后用 CSS 把显示框缩回原尺寸。
正确流程如下：
- 获取容器实际布局尺寸：
const w = canvas.clientWidth、const h = canvas.clientHeight - 按设备像素比设置缓冲区：
canvas.width = w * window.devicePixelRatio、canvas.height = h * window.devicePixelRatio - 用 CSS 固定显示尺寸：
canvas.style.width = w + "px"、canvas.style.height = h + "px" - 务必重绘内容（因为
canvas.width赋值已清空画布）
注意：resize 事件监听不够，必须确保 DOM 已就绪（DOMContentLoaded 后执行，或脚本放在 </body> 前）；否则 document.getElementById 找不到元素。
容易被忽略的静默失真点
哪怕你 JS 初始化完全正确，只要后续某处 CSS（比如全局重置样式、框架组件类名、媒体查询）覆盖了 canvas 的 style.width 或 style.height，而没同步更新其 width/height 属性，失真就一直存在——但不会报错，也不会警告。
它只在你画一条 45° 斜线、贴一张 PNG、做精确点击检测、导出高清 PNG 时才突然暴露。这时候你得倒查所有影响 canvas 样式的 CSS 规则，再逐个核对 HTML 属性是否匹配。
