HTML Canvas：旋转平移图像，使图像点固定到目标画布指定坐标

嘿，这个问题其实是典型的跨画布坐标映射+逆变换问题，我帮你拆解成可落地的步骤，保证你能快速实现点对齐：

核心逻辑是通过逆旋转变换抵消Canvas1的旋转，再结合平移变换将目标点精准定位到Canvas2的指定坐标。下面是具体步骤：

1. 明确旋转的核心参数 #

首先你得确定两个关键信息：

• 你对Canvas1执行旋转时的旋转角度θ（Canvas的rotate()用弧度制，顺时针为正，因为y轴向下）
• 旋转时的旋转中心：默认是Canvas1的原点(0,0)，如果旋转前你用translate(cx, cy)把坐标系移到了画布中心，那旋转中心就是(cx, cy)

2. 计算变换的核心步骤（以原点为旋转中心为例） #

假设你是直接以Canvas1原点为中心旋转了θ弧度，现在要让Canvas1上的点(x1,y1)落在Canvas2的(x2,y2)，操作Canvas2上下文的顺序必须严格遵循以下步骤：

// 定义参数
const rotateAngle = Math.PI / 2; // 示例：顺时针旋转90度
const targetPoint = { x: 200, y: 200 }; // Canvas2的目标点
const sourcePoint = { x: 100, y: 100 }; // Canvas1上的原始点

// 操作Canvas2上下文
const ctx2 = canvas2.getContext('2d');
ctx2.save(); // 保存当前上下文状态

// 步骤1：将Canvas2的坐标系原点移到目标点
ctx2.translate(targetPoint.x, targetPoint.y);
// 步骤2：逆旋转（抵消Canvas1的旋转）
ctx2.rotate(-rotateAngle);
// 步骤3：将坐标系移回Canvas1原始点的反方向，让原始点对齐目标点
ctx2.translate(-sourcePoint.x, -sourcePoint.y);

// 绘制Canvas1到Canvas2
ctx2.drawImage(canvas1, 0, 0);

ctx2.restore(); // 恢复上下文状态

原理解释 #

这几步变换相当于把Canvas1的内容：

1. 先“转回来”（逆旋转）抵消之前的旋转操作
2. 再平移到Canvas2的目标位置
3. 最终让原始点(x1,y1)精准落在(x2,y2)

3. 旋转中心非原点的适配 #

如果旋转前你先平移到了自定义的旋转中心(cx, cy)（比如Canvas1的中心），那需要调整平移参数，修正后的代码如下：

const rotateCenter = { x: canvas1.width/2, y: canvas1.height/2 }; // Canvas1中心

ctx2.save();
ctx2.translate(targetPoint.x, targetPoint.y);
ctx2.rotate(-rotateAngle);
// 先平移回旋转中心的反方向，再平移回原始点的反方向
ctx2.translate(-(sourcePoint.x - rotateCenter.x), -(sourcePoint.y - rotateCenter.y));
ctx2.translate(-rotateCenter.x, -rotateCenter.y);

ctx2.drawImage(canvas1, 0, 0);
ctx2.restore();

关键注意事项 #

• 弧度转换：如果你的旋转角度是度数（比如90度），记得转成弧度：度数 * Math.PI / 180
• 变换顺序：Canvas的变换是坐标系累加，顺序不能搞反——必须先平移到目标点，再逆旋转，最后平移回原始点的反方向
• 坐标系方向：Canvas的y轴向下，所以旋转方向是顺时针，和数学上的逆时针坐标系不同，逆旋转要用负角度

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