用JavaScript动态计算整个循环的SVG路径

Question

我正试图根据用户输入的角度绘制一个圆的周长。角度决定周长完成度:360°为整圆，180度为半圆，以此类推。

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

我知道这可能是基本的数学，但到目前为止我所尝试的一切都不起作用。

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;

如果你把这三行替换一下，你的小提琴就很管用了。