Html5 canvas 围绕中心点旋转三角形，不重叠

我有一个400x300 HTML画布，我试图用一个圆圈和7个三角形画一个太阳。要绘制三角形，我需要进行平移、旋转、平移，如图所示。但是，有些三角形重叠，好像它们有相同的角度

我不知道怎么回事，我检查了计算出的弧度，它们都在0到2*PI之间

var drawSun = function () {

    // Circle
    context.beginPath();
    context.arc(75, 75, 30, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();

    context.save();

    // Triangles
    for (var i = 0; i < 7; i++) {

        // Rotate the canvas around a point
        angle = i * 360 / 7;
        console.log(angle, angle * Math.PI / 180);
        context.translate(75, 75);
        context.rotate(angle * Math.PI / 180);
        context.translate(-75, -75);

        // Draw the triangle
        context.beginPath();
        context.fillStyle = 'rgba(0,0,0,0.5)';
        context.moveTo(60, 35);
        context.lineTo(75, 15);
        context.lineTo(90, 35);
        context.closePath();
        context.fill();

        context.restore();
    }
}

var drawSun=函数（）{
//圈
context.beginPath（）；
弧（75,75,30,0，Math.PI*2，true）；
closePath（）；
context.fill（）；
context.save（）；
//三角形
对于（变量i=0；i<7；i++）{
//围绕一个点旋转画布
角度=i*360/7；
console.log（角度，角度*Math.PI/180）；
语境。翻译（75,75）；
旋转（角度*Math.PI/180）；
翻译（-75，-75）；
//画三角形
context.beginPath（）；
context.fillStyle='rgba（0,0,0,0.5）'；
上下文。moveTo（60,35）；
上下文。lineTo（75,15）；
lineTo（90,35）；
closePath（）；
context.fill（）；
restore（）；
}
}

有时，这里的答案有很多要点，但实际上不是很好。使用ctx.setTransform可以更轻松地处理转换，因为它完全替代了现有的转换。因此，没有必要保存状态以了解您的位置

它还可以帮助渲染对象时始终围绕其自己的旋转中心布局其坐标。你把那个中心移到你需要的地方

无论如何，下面是你如何做到这一点。该功能将处理不同的点计数，并且更加有序，没有不必要的闭合路径，节省恢复和从度到弧度的转换

var ctx=canvas.getContext（'2d'）；
var drawSun=函数（x，y，rad，count）{
var drawRay=函数（ang）{
//一半宽度，注意，我从2PI*r得到宽度，但当我需要一半时，我放弃了2
变量宽度=（Math.PI*（rad+5））/count；
setTransform（1,0,0,1,x，y）；
ctx.旋转（ang）；
ctx.beginPath（）；
ctx.moveTo（-width，rad+5）；
ctx.lineTo（0，rad+20）；
ctx.lineTo（宽度，rad+5）；
ctx.fill（）；
}
ctx.fillStyle=“#F90”；
setTransform（1,0,0,1,x，y）；//将太阳中心移动到它应该所在的位置。
ctx.beginPath（）；
弧（0，0，rad，0，Math.PI*2，true）；//在0,0处绘制太阳
ctx.fill（）；
对于（变量i=0；i
有时这里的答案有很多要点，但实际上并不是很好。使用ctx.setTransform可以更轻松地处理转换，因为它完全替代了现有的转换。因此，没有必要保存状态以了解您的位置

它还可以帮助渲染对象时始终围绕其自己的旋转中心布局其坐标。你把那个中心移到你需要的地方

无论如何，下面是你如何做到这一点。该功能将处理不同的点计数，并且更加有序，没有不必要的闭合路径，节省恢复和从度到弧度的转换


var ctx=canvas.getContext（'2d'）；
var drawSun=函数（x，y，rad，count）{
var drawRay=函数（ang）{
//一半宽度，注意，我从2PI*r得到宽度，但当我需要一半时，我放弃了2
变量宽度=（Math.PI*（rad+5））/count；
setTransform（1,0,0,1,x，y）；
ctx.旋转（ang）；
ctx.beginPath（）；
ctx.moveTo（-width，rad+5）；
ctx.lineTo（0，rad+20）；
ctx.lineTo（宽度，rad+5）；
ctx.fill（）；
}
ctx.fillStyle=“#F90”；
setTransform（1,0,0,1,x，y）；//将太阳中心移动到它应该所在的位置。
ctx.beginPath（）；
弧（0，0，rad，0，Math.PI*2，true）；//在0,0处绘制太阳
ctx.fill（）；
对于（变量i=0；i