在javascript画布上旋转单个三角形

我试图创建六个三角形一起形成一个六边形，然后旋转它们。我成功地创建了一个切片六边形，并且我能够旋转它，但是我希望每个切片都能单独工作（例如，如果一个对象碰到一个切片，它的大小应该缩小，而另一个应该保持相同的大小）。下面是我在画布上成功运行的代码。有人能帮我画一个单独的三角形，用不同的参照，这样我就可以根据需要修改它们了。我计划让三角形看起来更小或更大，使用“lineTo”来绘制所需大小的三角形，然后填充它们。请让我知道是否有其他方法来实现这一点。非常感谢

<script>
var numberOfSides = 6,
size = 100,
Xcenter = 0,
Ycenter = 0,
prevX,
prevY,
startPX,
startPY,
angle = 0.1,
angleChange=Math.PI/180;

ctx.beginPath();
ctx.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));          
startPX = Xcenter +  size * Math.cos(0); 
startPY = Ycenter +  size *  Math.sin(0);

requestAnimationFrame(animate);

function animate(time){
requestAnimationFrame(animate);
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();

// translate and rotate the canvas
ctx.translate(canvas.width/2,canvas.height/2);
ctx.rotate(angle); 
for (var i = 1; i <= numberOfSides;i += 1) {
ctx.fillStyle = 'blue';
//    ctx.fillStyle = get_random_color();
//    addMessage(get_random_color());
// save the untranslated & unrotated context state



ctx.lineTo(Xcenter,Ycenter);
ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
ctx.lineTo (startPX, startPY);
ctx.closePath();
ctx.fill();
//    prevX = Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides);
//    prevY = Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides);
startPX = Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides);
startPY = Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides);
ctx.moveTo(startPX,startPY);
ctx.beginPath();
}

// restore the context to its untranslated & unrotated state
ctx.restore();    
angle+=angleChange;


}
ctx.closePath();
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 1;
ctx.stroke();
//}
</script>

var numberOfSides=6，
尺寸=100，
Xcenter=0，
中心=0，
普雷维，
普雷维，
startPX，
startPY，
角度=0.1，
角度变化=Math.PI/180；
ctx.beginPath（）；
ctx.moveTo（Xcenter+size*Math.cos（0），Ycenter+size*Math.sin（0））；
startPX=Xcenter+size*Math.cos（0）；
startPY=Ycenter+size*Math.sin（0）；
请求动画帧（动画）；
函数动画（时间）{
请求动画帧（动画）；
clearRect（0,0，canvas.width，canvas.height）；
ctx.save（）；
//平移和旋转画布
ctx.translate（canvas.width/2，canvas.height/2）；
ctx.旋转（角度）；
对于（var i=1；i一种方法是创建一个
Slice
类，并将绘制函数移动到此类中。现在为每个Slice创建一个
Slice
对象/实例（
newslice（…）
），可以单独设置样式（
slices[0]。setColor（'red'）
），请参见下面的片段

我建议通过创建具有相同坐标的切片并通过
ctx.rotate
将切片旋转到正确的位置来改进下面的示例


var Slice=函数（Xcenter、Ycenter、size、number、numberOfSides）{
这个比例=1.0；
this.color='blue'；
this.pos=[]；
这个.pos.push（{x:Xcenter，y:Ycenter}）；
这个位置推({
x:Xcenter+size*Math.cos（（数字+1）*2*Math.PI/numberOfSides），
y:Ycenter+size*Math.sin（（数字+1）*2*Math.PI/numberOfSides）
});
这个位置推({
x:Xcenter+size*Math.cos（数字*2*Math.PI/numberOfSides），
y:Ycenter+size*Math.sin（数字*2*Math.PI/numberOfSides）
});
};
Slice.prototype.setScale=函数（比例）{
这个比例=比例；
};
Slice.prototype.setColor=函数（颜色）{
这个颜色=颜色；
};
Slice.prototype.draw=函数（ctx）{
ctx.save（）；
ctx刻度（这个刻度，这个刻度）；
ctx.beginPath（）；
对于（var i=0；它有很多缺陷，工作起来很有魅力。如果你能在两件事情上提供帮助，那将是非常棒的，1）。在六边形的外线上进行碰撞检测的方法。2）如果有多个玩家同时玩这个游戏，每个玩家都会看到自己处于底部，而其他玩家则相对处于底部。@rajendersohi很高兴知道我的回答很有帮助。关于其他问题：请为每个问题创建一个关于StackOverflow的问题。我当然会。我可以在这里发布我的其他问题的链接吗？@rajendersohi这是可能的，但不寻常。我可以通过你的用户名找到你的问题。我为额外的帮助创建了一个新问题。