使用 JavaScript 动态计算整圈的 SVG 路径

Question

我正在尝试根据用户输入的角度绘制圆的周长。角度决定了周长的完成度：360° 是整个圆，180° 是圆的一半，依此类推。

我的问题是：给定圆的半径、角度和中心坐标，我如何动态计算周长的路径？

我知道这可能是基础数学，但到目前为止我尝试的所有方法都不起作用。

这是我的小提琴：https://jsfiddle.net/Hal_9100/L311qq88/ 我的问题是为路径的 x 和 y 坐标找到正确的公式：

var x = i * (radius * Math.cos(angle)) + centerX;
var y = i * (radius * Math.sin(angle)) + centerY;

我在这里错了吗？

这是我正在尝试做的一个示例：请注意，只应绘制黑色周长：我只是使用红色虚线给出了一个可视示例，说明如何根据值绘制周长由用户提供。

Answer 1

是的，问题在于你的数学。下面是计算 x,y 坐标对的正确方法（注意迭代是从零到所需角度，而不是从零到半径）：

for (var i = 0; i <= angle; i++) {
        var x = (radius * Math.cos((i-90)*Math.PI/180)) + centerX;
        var y = (radius * Math.sin((i-90)*Math.PI/180)) + centerY;

如果你替换这三行，你的小提琴就可以正常工作。