HTML Canvas平移与旋转问题：六边形旋转偏移解决求助

问题根源 #

你的六边形旋转偏移核心有两个问题：

1. 初始中心坐标计算错误，hexCenterX不该减去hexSize，画布中心就是画布宽高的一半
2. 坐标系平移后仍用原始中心坐标绘制顶点，导致双重偏移——你已经把坐标系移到中心了，再用hexCenterX计算顶点等于在平移后的坐标系里又加了一次中心偏移，旋转后自然会跑出去

修正步骤 #

• 把hexCenterX修正为myCanvas.width / 2，和矩形的centerX保持一致逻辑
• 执行translate后，所有顶点坐标以**原点(0,0)**为基准计算，不再使用hexCenterX和hexCenterY
• 删掉没用的console.log，避免冗余输出
• 每次绘制前清空画布，防止图形重叠

修正后的六边形代码 #

let hexCenterX = myCanvas.width / 2; // 修正中心X坐标
let hexCenterY = myCanvas.height / 2;
let hexSize = 60;
let angle = 0; // 确保angle已定义
let isRotating = true; // 确保isRotating已定义

function incrementAngle() {
  angle += 10; // 补充角度递增逻辑，和矩形保持一致
}

function drawHexagon() {
  theContext.clearRect(0, 0, myCanvas.width, myCanvas.height); // 清空画布避免重叠
  theContext.save();

  theContext.translate(hexCenterX, hexCenterY);
  if(isRotating) {
    theContext.rotate(angle * (Math.PI / 180));
  }

  theContext.beginPath();
  // 以原点(0,0)为基准计算第一个顶点
  theContext.moveTo(hexSize * Math.cos(0), hexSize * Math.sin(0));

  for (var i = 1; i <= 6; i++) {
    // 所有顶点都基于原点计算
    theContext.lineTo(hexSize * Math.cos(i * 2 * Math.PI / 6), hexSize * Math.sin(i * 2 * Math.PI / 6));
  }

  theContext.closePath();
  theContext.strokeStyle = "blue";
  theContext.stroke();

  theContext.restore();
  incrementAngle();
}

// 启动旋转定时器
let looper = setInterval(drawHexagon, 40);

扩展到任意多边形的通用逻辑 #

只要遵循以下步骤，任何多边形都能在画布中心原地旋转：

1. 计算画布中心：centerX = canvas.width/2，centerY = canvas.height/2
2. 绘制前执行save()，然后translate(centerX, centerY)将坐标系移到中心
3. 执行rotate(angle * Math.PI/180)应用旋转
4. 所有顶点坐标以原点(0,0)为基准计算，比如正N边形的顶点公式为：x = radius * Math.cos(i * 2*Math.PI/N)，y = radius * Math.sin(i * 2*Math.PI/N)（i从0到N）
5. 绘制完成后执行restore()恢复坐标系，避免影响后续绘制
6. 每次绘制前清空画布（clearRect），防止图形重叠

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