直接用style.transform="scale()"会导致鼠标坐标错乱，因为css缩放不改变canvas 2d上下文的逻辑坐标系，clientx/clienty与ctx绘图坐标不再对齐，引发ispointinpath失效、拖拽脱手等问题。
style属性直接写scale()为什么会让鼠标坐标错乱
Canvas元素上用style.transform = "scale(2)"看似省事，但会彻底割裂绘图坐标系和事件坐标系。浏览器渲染层的缩放不改变ctx内部的逻辑单位——ctx.moveTo(100, 100)画的点仍在像素(100, 100)，而clientX/clientY拿到的是CSS像素位置，两者不再对齐。
常见错误现象：isPointInPath()始终返回false；拖拽节点时“脱手”；文字测量ctx.measureText()结果与实际渲染位置偏移。
- 不是bug，是设计如此：CSS transform只影响合成层，不参与Canvas 2D上下文的坐标计算
- 若必须用CSS缩放，所有鼠标交互前必须手动反算：
const x = (e.clientX - rect.left) / scale -
getBoundingClientRect()返回值是CSS像素，不能直接喂给ctx，必须映射
style.width/height和transform混用时的模糊根源
只改style.width和style.height，或只改style.transform，都会导致缓冲区分辨率与显示尺寸不匹配。前者让低分辨率位图被拉伸，后者让高分辨率位图被压缩，最终都触发浏览器插值算法，线条毛边、文字发虚、圆形变椭圆。
典型错误组合：canvas.style.width = "800px"; canvas.style.height = "600px"; canvas.style.transform = "scale(1.5)"——此时物理像素完全失控。
- 正确做法是二选一：要么纯CSS控制显示（需同步设置
canvas.width/canvas.height为物理像素），要么纯ctx.scale()控制逻辑缩放 - 若用
transform，必须同时设canvas.style.transformOrigin = "0 0"并固定原点，否则缩放中心漂移 - 移动端WebView对
transform缩放支持不稳定，部分安卓机型会丢帧或闪屏
行内style批量更新的性能陷阱
高频缩放场景下，反复赋值canvas.style.transform会触发样式重计算+布局+绘制流水线，比直接操作ctx慢一个数量级。尤其当父容器有will-change: transform时，强制GPU上传反而增加开销。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
实测对比：每帧调用canvas.style.transform = `scale(${scale})` vs ctx.setTransform(scale, 0, 0, scale, 0, 0)，后者CPU占用低40%以上。
- 避免在动画循环中拼接字符串赋值
style，改用cssText一次性写入（如canvas.style.cssText = "transform: scale(1.2); transform-origin: 0 0;"） - 不要用
getComputedStyle(canvas).transform读取当前值做差值计算——它返回矩阵字符串，解析成本高 - 缩放系数变化极小时（如
1.001 → 1.002），可跳过style更新，直接复用上次矩阵
动态适配devicePixelRatio时style必须同步修正
高DPI屏上，window.devicePixelRatio可能为2或3，但canvas.style.width仍按CSS像素设置。若忽略这点，style和width/height数值错位，缩放后模糊不可逆。
例如：容器宽800px，dpr === 2，则canvas.width = 1600，但若canvas.style.width仍为"800px"，浏览器会把1600像素压缩进800CSS像素，照样模糊。
- 必须成对设置：
canvas.width = container.clientWidth * dpr+canvas.style.width = container.clientWidth + "px" - 用
ResizeObserver监听容器变化，而非window.resize，避免获取不到真实尺寸 - 部分安卓WebView对
dpr > 2支持差，建议上限截断：const safeDPR = Math.min(dpr, 2)
缩放本身不复杂，但style和ctx两条路径的坐标、分辨率、时机必须严格对齐，漏掉任意一环，模糊或错位就藏在下一帧里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
