Canvas变换方法：translate rotate scale详解

Canvas的translate、rotate、scale方法，初学者常误以为是在操作图形本身。实际上，它们改变的是整个坐标系。这意味着你是在移动、旋转或缩放整个“绘图世界”，之后所有的fillRect、strokePath、fillText等绘制操作，都会自动在这个新的坐标系下进行。掌握这一核心概念，能有效避免图形错位、飞出画布或旋转中心错误等问题。

Canvas 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()包裹这组操作。否则，后续所有绘制都会“继承”这一旋转状态，导致画面混乱。

Canvas scale放大后线条发虚文字模糊的解决方法

使用scale()放大后图形变模糊，是Canvas开发中的常见问题。其根源在于，scale()放大了坐标系的单位，原本1像素的线宽在渲染时被拉伸，浏览器为平滑边缘进行插值抗锯齿，导致视觉上变“虚”。文字渲染也会失去亚像素精度。

解决方案有以下几种思路：

• 推荐方案：使用CSS的transform: scale()缩放整个元素。此方法不干扰Canvas内部坐标逻辑，能保持图形清晰度。
• 备用方案：如果必须使用ctx.scale()，则需同步调整线宽和字体大小。例如执行ctx.scale(2, 2)后，应设置ctx.lineWidth = 0.5以保持视觉上1像素的粗细；原本'12px sans-serif'的字体也需改为'24px sans-serif'。
• 扩展技巧：缩放参数使用负值可实现镜像效果，例如ctx.scale(-1, 1)为水平翻转。但需注意，文字也会被反向，通常需要再次调用ctx.scale(-1, 1)进行校正。

Canvas变换顺序的重要性：translate rotate scale为何不能乱序？

Canvas变换本质上是矩阵的叠加运算，顺序不同会导致最终效果差异巨大。例如：先rotate再translate，意味着图形先绕左上角旋转，再被平移；而先translate再rotate，则是先移动到目标点，再绕该点旋转。

实现绕某一点(cx, cy)旋转的典型正确顺序应为：

• ctx.translate(cx, cy) → ctx.rotate(angle) → ctx.translate(-cx, -cy) → 执行绘制。

为保障代码安全与清晰，强烈建议使用ctx.save()和ctx.restore()包裹整组变换操作，避免影响后续绘制状态。

此外，若需彻底清除之前所有变换的影响，可使用ctx.setTransform(1, 0, 0, 1, 0, 0)。此方法能将变换矩阵一键重置为单位矩阵，有时比反复调用restore更直接可控。

最后提醒一个易忽略的要点：鼠标交互。页面获取的鼠标事件坐标（clientX/clientY）始终相对于浏览器视口，而Canvas内部坐标已历经各种变换。因此，在进行点击检测等交互时，必须先用getBoundingClientRect()获取画布在页面中的实际位置，再手动对坐标进行逆变换，映射回Canvas坐标系。忽略此步骤将导致交互逻辑错误。