canvas 的 height 必须设为整数像素值，HTML 中写 height="400" 最稳妥；仅用 style.height 会拉伸显示但内部仍为150像素；JS 动态修改 canvas.height 会清空画布并重置上下文；高 DPI 设备需乘 devicePixelRatio 并同步设置 style.height。
canvas 的 height 必须设为整数像素值，写在 HTML 标签里或通过 JS 赋值给 canvas.height，否则画布实际分辨率仍是默认的 150 像素——这不是“没生效”，而是浏览器硬编码的 fallback。
HTML 中直接写 height 属性最稳妥
这是初始化阶段最安全、最不易出错的方式。浏览器解析到 height="400" 就立刻分配对应大小的位图缓冲区，坐标系、字体渲染、鼠标映射全按这个尺寸算。
-
height值必须是纯数字字符串，比如"400"，不能带单位（"400px"会被忽略，回退到 150） - 不要只写
style="height: 400px"，那只是拉伸显示框，内部还是 150 像素，画圆变椭圆、isPointInPath()判断失效、导出 PNG 尺寸不对都由此来 - 响应式布局中，哪怕你用
width="100%"，也得补上显式的height="300"或类似值，否则默认 150 会和 CSS 撑开的尺寸严重 mismatch
JS 动态改 canvas.height 会清空画布
运行时调用 canvas.height = 600 是合法操作，但不是“缩放”，而是重建整个绘图缓冲区：所有已绘制内容消失，上下文状态（字体、线宽、变换矩阵）全部重置。
- 适合页面 resize 后重新适配：先读
canvas.clientWidth，再按window.devicePixelRatio计算真实像素，最后赋值canvas.height - 赋值后必须重绘，不能指望旧图形还在
- 避免在动画循环中频繁修改，每次都会触发内存重分配和清空，性能掉得明显
高 DPI 设备上 height 要乘 devicePixelRatio
在 MacBook、iPhone 或 2K/4K 屏上，window.devicePixelRatio 往往大于 1。如果只设 height="400"，而显示区域实际占 800 物理像素，就会插值模糊、线条发虚、点击坐标偏移。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：获取布局高度
const h = canvas.clientHeight，然后canvas.height = h * window.devicePixelRatio - 同时配
canvas.style.height = h + "px"，让显示框匹配逻辑尺寸 - 别漏掉
ctx.scale(1, 1)重置坐标系——否则后续绘图会按缩放后比例错位
真正容易被忽略的是：CSS 样式可能在某处悄悄覆盖了 canvas 的显示尺寸，而你 JS 里只更新了 width/height 属性，没同步调整 style，失真就一直静默存在，直到你画一条斜线、贴一张 PNG 或做精确点击检测时才暴露出来。
