Canvas图形翻转本质是仿射变换，通过scale(-1,1)或setTransform()实现水平/垂直翻转，需注意原点调整与save()/restore()状态隔离。

Canvas 实现图形翻转，本质是构造特定的仿射变换矩阵，通过 setTransform() 或组合 translate() + scale() 完成。翻转不是“镜像滤镜”，而是坐标系的定向重映射，关键在于理解哪一轴被反向、原点是否需调整。

水平翻转（左右镜像）

水平翻转即沿 y 轴对称，等价于 x 坐标取反。最简方式是用 scale(-1, 1)，但要注意：它以画布原点 (0, 0) 为翻转中心，直接调用会导致图形跑到画布左侧外。

• 若想让一个宽 100、高 60 的矩形以自身左上角为基准翻转，可先平移再缩放：
  ctx.translate(x, y); ctx.scale(-1, 1); ctx.fillRect(0, 0, 100, 60);
  此时矩形会从 (x, y) 向左延伸 100 像素
• 更稳妥的做法是绕图形中心翻转：先移到中心点，scale(-1, 1)，再移回
  

  ctx.save();<br>
    ctx.translate(cx, cy);<br>
    ctx.scale(-1, 1);<br>
    ctx.translate(-cx, -cy);<br>
    ctx.fillRect(cx - 50, cy - 30, 100, 60);<br>
    ctx.restore();

垂直翻转（上下镜像）

垂直翻转即沿 x 轴对称，对应 y 坐标取反，用 scale(1, -1) 实现。同样受原点影响：

• 默认以 (0, 0) 翻转，图形会向上偏移——因为原本 y=0 是顶部，y 取反后正方向朝下变成朝上
• 推荐组合操作：设图形原位置为 (x, y)，高 h，则中心纵坐标为 y + h/2
  

  ctx.save();<br>
    ctx.translate(x, y + h/2);<br>
    ctx.scale(1, -1);<br>
    ctx.translate(-x, -(y + h/2));<br>
    ctx.fillRect(x, y, w, h);<br>
    ctx.restore();

任意轴翻转与 setTransform 精确控制

当需要绕非坐标轴方向翻转（如沿 45° 斜线），或需复用同一矩阵多次，应直接使用 setTransform() 设置完整矩阵。例如水平翻转并平移至指定位置 (tx, ty)：

• ctx.setTransform(-1, 0, 0, 1, tx * 2, ty);
  解释：a = -1（x 缩放），d = 1（y 不变），e = tx×2 是为抵消缩放导致的位移偏移（因 x→-x 后，原点 (tx, ty) 映射到 (-tx, ty)，需补 2×tx 把图形拉回）
• 通用公式（绕点 (cx, cy) 水平翻转）：
  ctx.setTransform(-1, 0, 0, 1, 2*cx, 0);
  垂直翻转则为：ctx.setTransform(1, 0, 0, -1, 0, 2*cy);

注意事项与避坑点

翻转操作容易引发视觉错位，多数问题源于状态未隔离或坐标理解偏差：

• 务必配对使用 save() 和 restore()，否则后续所有绘图都会被翻转
• 文字、阴影、线宽不受变换影响——翻转后文字仍正立，若需同步翻转文字，得手动调整 fillText 的 x/y 参数或改用路径+文本路径绘制
• transform() 是叠加，setTransform() 是替换；混用时若先 transform 再 setTransform，前者会被覆盖，无需额外 reset
• 图像 drawImage() 同样遵循当前变换矩阵，翻转 canvas 后 drawImage 也会被镜像，适合批量处理贴图