Javascript 像轮子一样围绕中心点旋转三角形

我想创建一个旋转函数，使我的三角形可以像轮子一样自转，但我与我的代码中移动三角形的部分有冲突，我尝试了许多解决方案，但都没有成功，也许如果你们中有人有线索，那就好了

这是我的代码：

让三角形1；
设三角形2；
让三角形3；
设三角形4；
让三角形5；
让三角形6；
让speedX；
让快速；
让我们开始着色；
让我们结束颜色；
设amt=0；
函数设置（）{
startColor=颜色（“hsl（144100%，61%）”；
endColor=颜色（“hsl（0,77%，36%）”；
createCanvas（窗口宽度，800）；
//克里尔-诺特尔三角
三角形1=新三角形（200,100,0,4）；
/*三角形2=新三角形（100,50,2,0）；
三角形3=新三角形（50200，-1,4）；
三角形4=新三角形（250、400、4、4）；
三角形5=新三角形（150500,0,2）；
三角形6=新三角形（350500，-4,2）*/
}
函数绘图（）{
彩色模式（RGB）；
背景（25223810）；
三角形1.show（）；
三角形1.move（）；
/*三角形2.show（）；
三角形2.move（）；
三角形3.show（）；
三角形3.move（）；
三角形4.show（）；
三角形4.move（）；
三角形5.show（）；
三角形5.move（）；
三角形6.move（）；
三角形6.show（）*/
}
类三角形{
//欧比特构型
建造师（triX、triY、speedX、speedY）{
这个.x=triX；
这个.y=triY；
this.speedX=speedX；
这个。迅速的=迅速的；
}
show（）{
如果（金额>=1）{
金额=0；
设tmpColor=startColor；
startColor=endColor；
endColor=tmpColor；
}
amt+=0.03；
let colorTransition=lerpColor（起始颜色、结束颜色、金额）；
仰泳（）；
填充（颜色转换）；
三角形（这个.x，这个.y，这个.x+25，这个.y+40，这个.x-25，这个.y+40）；
}
移动（）{
this.x+=this.speedX；
this.y+=this.speedY；
if（this.x>宽度| | this.x<0）{
此参数为.speedX*=-1；
}
如果（此.x+25>宽度| |此.x+25<0）{
此参数为.speedX*=-1；
}
if（this.x-25>宽度| | this.x-25<0）{
此参数为.speedX*=-1；
}
if（this.y>高度| | this.y<0）{
this.speedY=this.speedY*-1；
}
if（this.y+40>高度| | this.y+40<0）{
this.speedY=this.speedY*-1；
}
}
}

---

使用矩阵变换旋转、缩放和平移形状。然后定义一个新的变换矩阵，并将当前矩阵与新矩阵相乘

如果要变换单个形状（三角形），则需要在变换前使用保存当前矩阵，并在变换后使用恢复矩阵

push（）；
//[…]缩放、旋转、平移
//[…]绘制形状
pop（）；

如果要围绕局部轴心点旋转形状，则需要围绕（0，0）绘制形状。旋转形状并将旋转后的形状移动到其目标位置：

shapeTrasformation=平移*旋转*缩放

等边三角形的局部旋转：

push（）
翻译（这个.x，这个.y，这个.z）；
旋转（此角度）
量表（30）；
三角形（-0.866,0.5,0.866,0.5,0，-1）；
pop（）；
该角度+=0.01；

让三角形1；
让speedX；
让快速；
让我们开始着色；
让我们结束颜色；
设amt=0；
函数设置（）{
startColor=颜色（“hsl（144100%，61%）”；
endColor=颜色（“hsl（0,77%，36%）”；
createCanvas（窗口宽度、窗口高度）；
//克里尔-诺特尔三角
三角形1=新三角形（200,100,0,4）；
}
函数绘图（）{
彩色模式（RGB）；
背景（25223810）；
三角形1.show（）；
三角形1.move（）；
}
类三角形{
//欧比特构型
建造师（triX、triY、speedX、speedY）{
这个.x=triX；
这个.y=triY；
this.speedX=speedX；
这个。迅速的=迅速的；
这个角度=0；
}
show（）{
如果（金额>=1）{
金额=0；
设tmpColor=startColor；
startColor=endColor；
endColor=tmpColor；
}
amt+=0.03；
let colorTransition=lerpColor（起始颜色、结束颜色、金额）；
仰泳（）；
填充（颜色转换）；
推
翻译（这个.x，这个.y，这个.z）；
旋转（此角度）
量表（30）；
三角形（-0.866,0.5,0.866,0.5,0，-1）；
pop（）；
该角度+=0.01；
}
移动（）{
this.x+=this.speedX；
this.y+=this.speedY；
if（this.x>宽度| | this.x<0）{
此参数为.speedX*=-1；
}
如果（此.x+25>宽度| |此.x+25<0）{
此参数为.speedX*=-1；
}
if（this.x-25>宽度| | this.x-25<0）{
此参数为.speedX*=-1；
}
if（this.y>高度| | this.y<0）{
this.speedY=this.speedY*-1；
}
if（this.y+40>高度| | this.y+40<0）{
this.speedY=this.speedY*-1；
}
}
}

---

好的，谢谢你的帮助！我尝试了平移和旋转，但我不理解push（）和pop（）的实用性！另外，把这个职位放在翻译是个好主意，我不这么认为。。所以，非常感谢您抽出时间，我有了更好的理解，知道了！：）@QuentinSerda

push

将矩阵推到堆栈上，然后

pop

pos。按照链接获取更多信息。非常感谢。不客气。