canvas 必须用 css 设置宽高，仅靠 width/height 属性会导致拉伸或模糊；需结合 getboundingclientrect()、devicepixelratio 和 ctx.scale() 实现高清适配。
Canvas 容器必须用 CSS 设置宽高，不能只靠 width 和 height 属性
很多人直接写 <canvas width="800" height="400"></canvas>，结果在手机上 canvas 内容被拉伸或裁切。这是因为 width 和 height 是 canvas 的**绘图坐标系分辨率**（即“画布像素”），不是显示尺寸。真正控制显示大小的是 CSS 的 width 和 height，两者不一致就会导致模糊、变形或比例错乱。
正确做法是：先用 CSS 让容器自适应（比如 width: 100%），再用 JavaScript 动态同步 canvas 的 width/height 属性到其实际渲染像素尺寸：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
<p>function resizeCanvas() {
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = Math.floor(rect.width <em> dpr);
canvas.height = Math.floor(rect.height </em> dpr);
ctx.scale(dpr, dpr); // 保持清晰
ctx.clearRect(0, 0, canvas.width, canvas.height);
}</p><p>window.addEventListener('resize', resizeCanvas);
resizeCanvas(); // 初始化</p>
用 getBoundingClientRect() 而不是 offsetWidth/offsetHeight
offsetWidth 只反映元素自身尺寸，不包含 transform 缩放、滚动偏移或 box-sizing 边框影响；而 getBoundingClientRect() 返回的是相对于视口的精确像素矩形，能真实反映 canvas 当前渲染区域大小，尤其在 flex/grid 布局、缩放页面或嵌套相对定位容器中更可靠。
- 如果 canvas 父容器用了
transform: scale(0.8)，offsetWidth仍返回原始值，getBoundingClientRect().width会返回缩放后的真实宽度 - 如果页面有横向滚动条，
offsetWidth包含滚动条宽度，getBoundingClientRect()不包含 - 响应式断点切换时，
getBoundingClientRect()自动适配，无需监听 media query
devicePixelRatio 必须参与计算，否则高清屏下线条发虚
iPhone、MacBook、Windows 高分屏默认 devicePixelRatio > 1。若忽略它，canvas 物理像素不足，浏览器会插值放大，导致文字锯齿、线条模糊、抗锯齿失效。
关键三步不能少：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用
getBoundingClientRect()获取 CSS 像素尺寸 - 乘以
devicePixelRatio得到真实绘图像素 - 调用
ctx.scale(dpr, dpr)，让所有绘图坐标自动适配（否则你要手动把所有ctx.lineTo(x, y)都乘 dpr）
注意：canvas.width 和 canvas.height 必须是整数，用 Math.floor() 或 Math.round()，避免小数触发 canvas 重采样。
父容器需设置明确的尺寸约束，否则 width: 100% 无效
常见陷阱：把 <canvas></canvas> 直接丢进一个空的 <div>，CSS 写了 <code>canvas { width: 100% }，结果 canvas 宽度为 0 —— 因为父 <div> 没高度，子元素 100% 就是 0。<p>确保至少满足以下之一：</p>
<ul>
<li>父容器设 <code>height: 400px 或 min-height: 30vh
flex: 1 或 min-height: 0（防止 flex item 不收缩）aspect-ratio: 16/9）配合 width: 100% 控制比例inset: 0，但需父容器 position: relative
没有约束的百分比宽度，在文档流中无法解析，canvas 就会塌陷。
设备像素比、布局约束、坐标系缩放这三点漏掉任何一环，canvas 在不同设备上就大概率出问题。尤其是 getBoundingClientRect() 和 devicePixelRatio 的组合，是目前最稳定跨平台的方案。
