使用Path2D旋转对象失效，ctx.rotate()正常的技术问题

你遇到的问题是变换顺序导致的：DOMMatrix的旋转默认围绕**坐标原点(0,0)**进行，而你先执行translate(10,10)再旋转，路径会绕原点旋转后偏离预期位置，看起来像是旋转未生效。而ctx.rotate()通常会配合坐标系平移，将原点移到路径中心后再旋转，所以效果符合预期。

调整变换矩阵的顺序，先把路径中心移到原点，完成旋转、缩放后，再平移到目标位置：

const ctx = document.body.appendChild(document.createElement('canvas')).getContext('2d')
// 设置画布大小避免内容被裁剪
ctx.canvas.width = 300;
ctx.canvas.height = 300;

let rotation = 45;
let p1 = new Path2D();
p1.rect(0, 0, 75, 75);

// 计算矩形中心坐标
const centerX = 75 / 2;
const centerY = 75 / 2;

let p2 = new Path2D();
// 变换顺序：移到目标中心 → 旋转 → 缩放 → 把路径中心对齐原点（逆序应用，对应实际先对齐原点再变换）
p2.addPath(p1, new DOMMatrix()
  .translate(10 + centerX, 10 + centerY)
  .rotate(rotation * Math.PI / 180)
  .scale(1, 1.2)
  .translate(-centerX, -centerY)
);

ctx.fillStyle = 'red';
ctx.fill(p2);

矩阵变换的链式调用是逆序生效的：

• 最后调用的translate(-centerX, -centerY)会先执行，把矩形的中心移到坐标原点
• 接着执行scale(1, 1.2)和rotate(...)，此时旋转是围绕矩形自身中心进行的
• 最后执行最开始的translate(10 + centerX, 10 + centerY)，将旋转后的矩形平移到目标位置

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