javascript画布围绕一个面向中心的圆绘制多个矩形

我正在寻找一种方法，以面向中心的角度围绕一个圆绘制多个矩形。到目前为止，我所做的只是围绕一个面向一个方向的圆圈绘制矩形，缺少朝向中心的角度倾角-

我想要的是，矩形以一定的角度倾斜，这样每个矩形都在指定的位置面对圆的中心。 怎么做呢？

三角法 要设置直线朝向中心的动画，可以使用变换或三角数学。就我个人而言，在这样的情况下，我觉得数学更容易，所以这里有这样一个例子

有关如何使用转换的示例，请参见@markE的答案（一般来说，转换在视觉上和代码中都比较容易）

一些先决条件：

• 我们知道画布的方向是使0°角指向右侧。如果您想以某种方式标记频率范围，这是必不可少的
• 我们需要计算从外半径到中心（内半径）的直线长度
• 我们需要根据角度计算直线的端点

一个简单的解决方案是生成一个函数，该函数以一定的角度（弧度）计算中心的一条直线，长度为t，t在[0,1]范围内（作为FFT浮点缓冲区）。我们还提供外半径和内半径，以限制线路：

function getLine(cx, cy, angle, t, oRadius, iRadius) {

    var radiusDiff = oRadius - iRadius,            // calc radius diff to get max length
        length = radiusDiff * t;                   // now we have the line length

    return {
        x1: oRadius * Math.cos(angle),             // x1 point (outer)
        y1: oRadius * Math.sin(angle),             // y1 point (outer)
        x2: (oRadius - length) * Math.cos(angle),  // x2 point (inner)
        y2: (oRadius - length) * Math.sin(angle)   // y2 point (inner)
    }
}

我们现在需要做的就是从FFT分析仪向它提供数据

注意：因为所有的线都指向中心，所以你会有一个拥挤的中心区域。在确定要使用的线宽度、内径以及料仓数量时，需要考虑的事项

示例演示 例如，我将使用一些随机数据进行“FFT”，并绘制64个箱子

//角度-以弧度为单位
函数getLine（cx、cy、angle、t、oRadius、iRadius）{
var radiudiff=oRadius-iRadius，//计算半径差异以获得最大长度
length=radiudiff*t；//现在我们有了行长度
返回{
x1:cx+oRadius*Math.cos（角度），//x1点（外部）
y1:cy+oRadius*Math.sin（角度），//y1点（外部）
x2:cx+（oRadius-长度）*数学cos（角度），//x2点（内部）
y2:cy+（oRadius-长度）*Math.sin（角度）//y2点（内部）
}
}
//根据箱子计算步骤数
var ctx=document.querySelector（“canvas”）.getContext（“2d”），
FFT长度=64，
角度步长=Math.PI*2/fft长度，
角度=0，
线
ctx.beginPath（）；//演示中不需要，但在设置动画时需要
同时（角度