如何在HTML Canvas上实现与CSS一致的图像变换绘制效果？

我明白你遇到的困扰了——Canvas的变换逻辑是基于矩阵叠加的，顺序错了就会完全偏离预期。下面是修正后的实现方案，以及详细的问题分析：

核心问题：Canvas变换顺序的优先级 #

Canvas的变换操作是矩阵乘法叠加，顺序绝对不能乱。要实现围绕图像中心的旋转、缩放，再将中心定位到目标坐标，正确的操作顺序应该是：

1. 先把Canvas坐标系原点平移到目标中心位置（deltaX, deltaY）
2. 再旋转坐标系（此时旋转会围绕新的原点，也就是图像中心）
3. 接着缩放坐标系（同样以图像中心为原点缩放）
4. 最后绘制图像时，将图像左上角定位到-width/2, -height/2，让图像中心刚好对齐坐标系原点

修正后的代码 #

img.onload = () => {
  const { rotation, scale, deltaX, deltaY } = this.transformBlock;
  const width = img.width;
  const height = img.height;

  // 保存当前上下文状态，避免影响后续其他绘制
  this.ctx.save();
  
  // 1. 平移坐标系到目标中心位置
  this.ctx.translate(deltaX, deltaY);
  // 2. 旋转坐标系（注意：Canvas的rotate接受弧度值，不是角度！）
  this.ctx.rotate((rotation * Math.PI) / 180);
  // 3. 以图像中心为原点缩放
  this.ctx.scale(scale, scale);
  // 4. 绘制图像，让图像中心对齐当前坐标系原点
  this.ctx.drawImage(img, -width / 2, -height / 2);
  
  // 恢复上下文初始状态
  this.ctx.restore();
};

原代码出错的原因 #

你的原代码顺序是rotate → scale → translate，这会导致几个关键问题：

• 旋转原点错误：先执行rotate时，坐标系原点还是Canvas默认的左上角，旋转是围绕左上角进行的，完全不是图像中心
• 缩放放大了位移：scale操作会把后续的translate也放大，比如你设置scale=2，实际位移会变成deltaX*2和deltaY*2，这就是图像超出屏幕的原因
• 角度单位错误：Canvas的rotate方法接受的是弧度值，你传入90（角度）的话，相当于旋转了约5156度，完全不是预期的90度

额外注意点 #

• 每次绘制前用save()、绘制后用restore()维护上下文状态，避免变换残留影响其他绘制内容
• 确保触摸手势的CSS变换原点是元素中心（默认值），这样和Canvas的变换逻辑就能完全同步

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