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