使用Python模拟等边三角形旋转的代码实现问题求助

核心逻辑很简单：所有2D图形旋转都要先确定旋转锚点（优先选三角形形心，避免旋转时图形移位），优先用渲染上下文自带的矩阵变换实现，不要手动硬算每个顶点的旋转后坐标，代码改动量最小也最不容易出bug。

原生Canvas 2D 实现步骤 #

• 先计算三角形形心作为旋转中心：取三个顶点X、Y坐标的平均值即可
• 绘制三角形前保存画布状态，按「平移原点到旋转中心→执行旋转→平移原点回原位置」的顺序调用变换方法
• 执行你原来写好的三角形绘制代码，不需要修改任何顶点坐标
• 绘制完成后恢复画布状态，避免变换逻辑影响其他图形的渲染

直接套下面的代码就行：

// ctx为你已经获取的Canvas2D上下文，points是存储三角形三个顶点坐标的数组，rotateAngle为旋转弧度值
// 计算三角形形心
const centerX = (points[0].x + points[1].x + points[2].x) / 3;
const centerY = (points[0].y + points[1].y + points[2].y) / 3;

ctx.save();
// 做坐标变换
ctx.translate(centerX, centerY);
ctx.rotate(rotateAngle); // 注意这里传的是弧度值，角度转弧度公式：角度 * Math.PI / 180
ctx.translate(-centerX, -centerY);

// 下方直接放你已经写好的三角形绘制代码，不需要做任何修改
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
ctx.lineTo(points[1].x, points[1].y);
ctx.lineTo(points[2].x, points[2].y);
ctx.closePath();
ctx.fill();
ctx.stroke();

ctx.restore();

如果要做连续旋转动画，在requestAnimationFrame的每帧回调里累加rotateAngle的值即可，比如每次加0.02就能得到匀速旋转的效果，数值越大旋转速度越快。

WebGL 实现要点 #

• 不要在CPU端计算顶点旋转后的坐标，直接在顶点着色器中传入旋转矩阵做运算，性能更高
• 按顺序把旋转矩阵、模型矩阵、投影矩阵相乘得到最终变换矩阵，顶点原始坐标乘该矩阵就能得到旋转后的正确位置
• 注意WebGL的Y轴方向和Canvas2D相反，旋转方向也会反过来，调整旋转角度的正负值就能匹配预期的旋转方向

常见踩坑提醒：不要跳过「保存/恢复画布状态」的步骤，也不要不做坐标平移直接调用rotate方法，否则旋转锚点会默认取画布左上角，三角形会绕着画布边角转，出现边转边飘的错位问题。

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