HTML5 Canvas调用rotate()后translate坐标倒置如何解决

你提到的对应解决方案是完全可行的，其核心逻辑是通过向量旋转变换适配当前坐标系的旋转状态，无需知晓历史变换操作的前提下就能实现符合预期的平移效果。

Canvas 2D上下文的所有变换（平移、旋转、缩放）都会修改当前上下文的变换矩阵，所有后续操作都是基于修改后的坐标系执行的。当你调用rotate()后，整个坐标系的x轴、y轴方向都会同步旋转，后续调用translate(x,y)时的x/y坐标是相对于当前旋转后的坐标轴的，自然会出现方向和预期不符的问题。

• 方案1：矩阵状态保存恢复
  若你不需要保留之前的变换状态，可在执行旋转类操作前调用ctx.save()保存当前矩阵状态，对应操作完成后调用ctx.restore()恢复，后续平移就会基于原始坐标系执行。该方案适合单次临时变换场景，无法满足旋转后仍需持续基于原坐标系操作的需求。
• 方案2：位移向量适配旋转（即对应方案的核心逻辑）
  若你需要在已有旋转的矩阵基础上，实现和原始坐标系方向一致的平移，可将预期的平移向量按当前坐标系的旋转角度做逆转换，计算出对应当前坐标系下的平移参数再调用translate()。
  具体计算逻辑如下：
  假设当前矩阵总旋转角度为rad，你想要沿原始坐标系x轴平移dx、y轴平移dy，那么实际需要传入translate的参数为：

  const actualDx = dx * Math.cos(rad) - dy * Math.sin(rad);
  const actualDy = dx * Math.sin(rad) + dy * Math.cos(rad);
  ctx.translate(actualDx, actualDy);
  

  如果你没有保存历史旋转角度，也可以直接读取上下文的当前变换矩阵ctx.getTransform()，从中提取旋转参数完成计算，无需知晓过往操作记录。
• 方案3：重置矩阵后重放变换
  直接调用ctx.resetTransform()重置为单位矩阵，完成你需要的平移操作后，再重新叠加之前的旋转等变换操作，也能实现预期效果。

将你示例中平移的代码按方案2修改后，即可实现预期的向左移动效果：

<canvas width="300" height="300"></canvas>
<script>
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");

ctx.fillStyle = "silver";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.strokeStyle = "black";
ctx.lineWidth = 1;
// 绘制x轴
ctx.beginPath();
ctx.moveTo(0, canvas.height/2);
ctx.lineTo(canvas.width, canvas.height/2);
ctx.stroke(); 
// 绘制y轴
ctx.beginPath();
ctx.moveTo(canvas.width/2, 0);
ctx.lineTo(canvas.width/2, canvas.height);
ctx.stroke();

// 提前记录旋转角度
const rotateRad = -90 * Math.PI / 180;
ctx.translate(150, 150);
ctx.rotate(rotateRad);
ctx.translate(-150, -150);

// 预期沿原始坐标系x轴向左移动100px，计算适配旋转后的平移参数
const targetDx = -100, targetDy = 0;
const actualDx = targetDx * Math.cos(rotateRad) - targetDy * Math.sin(rotateRad);
const actualDy = targetDx * Math.sin(rotateRad) + targetDy * Math.cos(rotateRad);
ctx.translate(actualDx, actualDy);

// 最终绘制图形
ctx.fillStyle = "red";
ctx.fillRect(150, 150, 100, 50);
</script>

内容的提问来源于stack exchange，提问作者kapodamy