如何将圆分为两半?

117 浏览
0 Comments

如何将圆分为两半?

我正在尝试使用JavaScript和元素来将一个圆分割成两半。我使用了这个问题的被接受的答案中给出的公式来找到圆的边缘上的点,但是出现了一个问题,当我给出圆上两个相对的点(例如0和180,或者90和270),我得到的线并没有通过圆心。\n我的代码可以在JSFiddle上看到,它生成了一个漂亮的螺旋线图案,虽然很酷,但这不是我想要的结果。\n我该如何修复这个问题,使线条通过圆心?\n(最终我想要绘制一个五度圆,但现在我只是在问如何使线条通过圆心。一旦解决了这个问题,我将继续进行其他步骤来完成五度圆,显然这将包括绘制更少的线条并丢弃螺旋线图案。)

0
0 Comments

问题的出现原因是Math函数中的绘图函数和三角函数需要以弧度为单位来指定角度,而不是以度为单位。因此,代码中将角度转化为弧度时,需要将degrees除以180再乘以Math.PI。解决方法是修改代码中的这一部分,将degrees除以180再乘以Math.PI。

代码如下:

function bisect(context, degrees, radius, cx, cy) {
    // calculate the point on the edge of the circle
    var x1 = cx + radius * Math.cos(degrees / 180 * Math.PI);
    var y1 = cy + radius * Math.sin(degrees / 180 * Math.PI);
    /* Trimmed */    
    // and calculate the point on the opposite side
    var x2 = cx + radius * Math.cos(degrees2 / 180 * Math.PI);
    var y2 = cy + radius * Math.sin(degrees2 / 180 * Math.PI);
    /* Trimmed */
}

此外,代码中还存在一个问题,绘制圆形时使用了错误的角度范围。在绘制圆形时,应该使用0到2π的角度范围,而不是0到360度的角度范围。解决方法是修改代码中绘制圆形的部分,将Math.PI * 2改为2π。

代码如下:

function draw(theCanvas) {
    /* Trimmed */
    // 2 * PI, which is 360 degree
    context.arc(250, 250, 220, 0, Math.PI * 2, false);
    /* Trimmed */
    context.arc(250, 250, 110, 0, Math.PI * 2, false);
    /* Trimmed */
    // No need to go up to 360 degree, unless the increment does
    // not divides 180
    for (j = 2; j < 180; j = j + 3) {
        bisect(context, j, 220, 250, 250);    
    }
    /* Trimmed */
}

最后,附录部分的代码是完整的源代码,用于在JSFiddle中运行。

0
0 Comments

问题的出现原因是,JavaScript中的角度是以弧度来表示的。在计算是否大于或小于180度时,应该使用Math.PI弧度来进行计算。

解决方法是,在函数中正确传递弧度值,使得线段能够通过圆心。可以将角度转换为弧度,使用Math.sin和Math.cos函数,也可以直接在整个计算过程中使用弧度。个人建议在整个计算过程中都使用弧度,基于τ(τ=2π)的概念。

以下是一个解决方法的示例链接:http://jsfiddle.net/7w29h/1/

参考网站:tauday.com

0