canvas缩放平移不能只改css transform，因其仅影响渲染层而不改变2d上下文坐标系，导致鼠标事件、绘制、检测等全部错位；正确做法是用ctx.settransform()统一管理逻辑坐标系，并同步适配设备像素比以避免模糊。
Canvas 缩放平移为什么不能只改 transform？
直接在 <canvas></canvas> 元素上设 style="transform: scale(2) translate(100px, 50px)" 看似能缩放平移，但实际会破坏绘图坐标系：鼠标事件坐标、ctx.drawImage()、文字测量、甚至 ctx.isPointInPath() 都会错位。浏览器渲染层的 transform 不影响 canvas 内部的 2D 上下文坐标系统，这是最常踩的坑。
正确做法是操作 ctx.setTransform() 或 ctx.transform()，让所有绘制、检测、计算都在统一的逻辑坐标系中进行。
用 ctx.setTransform() 实现稳定缩放+平移
setTransform(a,b,c,d,e,f) 重置并设置当前变换矩阵，其中 e 和 f 是 x/y 平移量，a 和 d 是 x/y 缩放（默认为 1），b 和 c 是倾斜（通常为 0）。它比 save()/restore() 更轻量，也避免累积误差。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 初始化时调用
ctx.setTransform(1, 0, 0, 1, 0, 0)清除默认缩放（尤其在高 DPI 屏幕下） - 缩放 2 倍 + 向右平移 100 单位：
ctx.setTransform(2, 0, 0, 2, 100, 0) - 若需“以某点为中心缩放”，先平移负中心坐标，再缩放，再平移回：
ctx.setTransform(scale, 0, 0, scale, -cx*scale + cx + tx, -cy*scale + cy + ty) - 鼠标坐标需反向映射：真实画布坐标 =
(mouseX - tx) / scale，不是简单除或减
鼠标事件如何匹配缩放后的画布坐标？
Canvas 本身不处理坐标转换，getBoundingClientRect() 返回的是 CSS 像素位置，而 ctx 坐标是逻辑单位。必须手动把鼠标 clientX/clientY 映射到当前 transform 下的逻辑坐标。
- 获取画布相对于视口的位置：
const rect = canvas.getBoundingClientRect() - 计算鼠标相对画布左上角的偏移：
const x = e.clientX - rect.left，y = e.clientY - rect.top - 应用逆变换：假设当前
ctx使用了scale=2、tx=100、ty=50，则逻辑坐标为(x - 100) / 2、(y - 50) / 2 - 更通用的做法是用矩阵求逆，但对纯缩放+平移，手算足够快且无精度问题
缩放后文字模糊、线条发虚怎么办？
这不是 transform 错误，而是 canvas 像素密度没适配设备像素比（dpr）。缩放后若未同步调整 canvas 的 width/height 属性，就会被 CSS 拉伸，导致抗锯齿失效。
- 不要只改
style.width/style.height；必须同步设置canvas.width和canvas.height为物理像素值 - 例如：canvas DOM 尺寸为 800×600，dpr=2，则设
canvas.width = 1600，canvas.height = 1200 - 缩放因子变化时，重新计算并重设
width/height，再清空重绘（ctx.clearRect()） - 字体大小建议用逻辑单位（如 14），而非像素值；避免
ctx.scale()后再设font，否则会双重缩放
缩放平移的核心不在视觉效果，而在坐标一致性——鼠标、绘制、检测、文字全部跑在同一套逻辑坐标里。一旦混用 CSS transform 和 ctx 变换，问题会分散在各处，很难归因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
