Canvas 的变换操作作用于坐标系而非图形本身，rotate() 绕原点（默认左上角）旋转，需配合 translate 移动原点实现绕中心旋转；scale 会导致模糊，应优先用 CSS 缩放或同步调整 lineWidth/font；变换顺序影响结果，正确绕点旋转需 translate→rotate→translate(-cx,-cy)；需用 save/restore 隔离变换，setTransform 可重置，鼠标坐标须逆变换映射。
Canvas 的 translate、rotate、scale 不是对图形“做变换”，而是移动、旋转、缩放整个坐标系——后续所有绘制（fillRect、strokePath、fillText）都会自动套用这个新坐标系。理解这点，就避开了 80% 的错位、飞出画布、旋转中心不对等问题。
为什么 rotate() 后图形绕左上角转，而不是绕自己中心？
因为 rotate() 永远绕当前坐标系原点（默认是画布左上角 (0, 0)）顺时针旋转，和你要画的图形位置无关。
- 想让一个矩形绕自身中心旋转：先用
ctx.translate(x + width/2, y + height/2)把原点移到矩形中心 - 再调
ctx.rotate(angle)（注意单位是弧度，不是度） - 最后用相对于新原点的坐标绘制，比如
ctx.fillRect(-width/2, -height/2, width, height) - 如果只影响单个图形，务必配对使用
ctx.save()和ctx.restore()，否则后续所有绘制都会继承该旋转
scale(2, 2) 后线条发虚、文字模糊，怎么保持清晰？
scale() 放大了坐标系单位，1px 线宽实际被渲染为 2px 像素，并触发浏览器插值抗锯齿，导致视觉模糊；文本也失去亚像素渲染能力。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 优先方案：用 CSS
transform: scale()缩放整个<canvas>元素，不干扰 canvas 内部坐标逻辑 - 若必须用
ctx.scale()，需同步调整线宽和字体大小：例如ctx.scale(2, 2)后，设ctx.lineWidth = 0.5才能保持视觉上 1px，ctx.font = '12px sans-serif'要改为'24px sans-serif' - 负值可实现镜像：
ctx.scale(-1, 1)水平翻转（注意文本也会反向，需额外ctx.scale(-1, 1)补正）
translate / rotate / scale 的执行顺序为什么不能乱？
Canvas 变换是矩阵叠加，顺序直接影响最终效果。比如 rotate 在 translate 前，等于绕左上角旋转后再平移；反过来，才是先移到目标点再绕该点旋转。
立即学习“前端免费学习笔记（深入）”；
- 典型正确顺序（以绕点
(cx, cy)旋转为例）：ctx.translate(cx, cy)→ctx.rotate(angle)→ctx.translate(-cx, -cy)→ 绘制 - 更安全的做法是用
ctx.save()包裹整组操作，避免污染后续绘制 -
ctx.setTransform(1, 0, 0, 1, 0, 0)可一键重置所有变换（清空 translate/rotate/scale 累积），比反复restore更可控
最容易被忽略的是：鼠标事件坐标（clientX/clientY）永远基于页面坐标，而 canvas 内部坐标已受变换影响。映射时必须用 getBoundingClientRect() 获取画布视口位置，并手动对坐标做逆变换——这步不做，交互逻辑必错。
