HTML5 Canvas循环绘制带旋转三角形无法保持直线排列问题

问题根源 #

你遇到的偏移问题，核心是旋转中心错误：
当前代码用setTransform将坐标系原点移到(10+x*100, y*100)，随后的rotate是围绕这个原点进行的。但你的三角形顶点相对于该原点存在y轴偏移（比如(0,40)、(40,40)），旋转后这些点的y坐标会随角度变化，导致整个三角形偏离y*100的水平线。

解决思路 #

让旋转围绕三角形的固定基准点（比如你希望保持在y*100线上的顶部点(20,0)）进行，这样旋转后该基准点位置不变，三角形就能维持在预期的水平线上。

修改后的代码（方案一：分步变换） #

let c = document.querySelector("canvas").getContext("2d");
let objects = [2, 4, 6, 8, 10];

for (let y = 0; y < 5; y++) {
  let object = objects[y];
  let angle = 0;
  for (let x = 0; x < object; x++) {
    // 重置变换矩阵，避免累计影响
    c.setTransform(1, 0, 0, 1, 0, 0);
    
    // 1. 平移到三角形顶部点的目标位置（确保该点在y*100线上）
    c.translate(10 + x * 100 + 20, y * 100);
    // 2. 围绕顶部点旋转（此时顶部点处于坐标系原点）
    c.rotate(angle * Math.PI / 180);
    // 3. 平移回三角形绘制的基准位置，让原(20,0)对应当前原点
    c.translate(-20, 0);

    c.beginPath();
    c.moveTo(20, 0);
    c.lineTo(0, 40);
    c.lineTo(40, 40);
    c.closePath();
    c.fill();
    angle += 20;
  }
}

修改后的代码（方案二：直接设置变换矩阵，更高效） #

如果想减少变换调用次数，可以直接计算围绕基准点旋转的变换矩阵，一次性通过setTransform设置：

let c = document.querySelector("canvas").getContext("2d");
let objects = [2, 4, 6, 8, 10];

for (let y = 0; y < 5; y++) {
  let object = objects[y];
  let angle = 0;
  for (let x = 0; x < object; x++) {
    const theta = angle * Math.PI / 180;
    const cos = Math.cos(theta);
    const sin = Math.sin(theta);
    // 顶部点的目标位置（y坐标固定为y*100）
    const pX = 10 + x * 100 + 20;
    const pY = y * 100;
    
    // 设置围绕(pX,pY)旋转的变换矩阵
    c.setTransform(
      cos, -sin,
      sin, cos,
      pX - pX * cos + pY * sin,
      pY - pX * sin - pY * cos
    );

    c.beginPath();
    c.moveTo(20, 0);
    c.lineTo(0, 40);
    c.lineTo(40, 40);
    c.closePath();
    c.fill();
    angle += 20;
  }
}

两种方案都能让三角形保持在y*100的水平线上，同时保留旋转效果。

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