Javascript 我怎样才能把这个圆平分？

我试图用JavaScript和

元素将一个圆平分。我使用了公认答案中给出的公式来寻找圆边上的点，但由于某种原因，当我在圆上给出两个相反的点（例如0和180，或90和270）时，我没有得到一条穿过圆中心的线

，制作了一个很好的螺旋纹图案，这很酷，但这不是我想要做的

我如何修复此问题，使线穿过中心

---

（最终我试图画a，但我现在要问的是如何让线穿过中心。一旦成功，我将继续其他步骤来画五分之一圆，这显然包括画更少的线和丢失螺旋形圆环。）

Javascript中的度是以弧度指定的。不要检查大于或小于180，然后加上或减去180，而是对

Math.PI

radians执行相同的操作

---

数学中的绘图函数和三角函数要求以弧度而不是度数指定角度

Diff使用当前代码：

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 */
}

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 */
}

JavaScript

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);

    // get the point on the opposite side of the circle
    // e.g. if 90, get 270, and vice versa
    // (super verbose but easily readable)
    if (degrees > 180) {
        var degrees2 = degrees - 180;
    } else {
        var degrees2 = degrees + 180;
    }

    // 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);

    // now actually draw the line
    context.beginPath();
    context.moveTo(x1, y1)
    context.lineTo(x2, y2)
    context.stroke();
}

function draw(theCanvas) {
    var context = theCanvas.getContext('2d');
    // draw the big outer circle
    context.beginPath();
    context.strokeStyle = "#222222";
    context.lineWidth = 2;
    context.arc(250, 250, 220, 0, Math.PI * 2, false);
    context.stroke();
    context.closePath();

    // smaller inner circle
    context.beginPath();
    context.strokeStyle = "#222222";
    context.lineWidth = 1;
    context.arc(250, 250, 110, 0, Math.PI * 2, false);
    context.stroke();
    context.closePath();

    for (j=2; j < 180; j = j + 3) {
        bisect(context, j, 220, 250, 250);    
    }

}
$(function () {
    var theCanvas = document.getElementById('the_canvas');
    console.log(theCanvas);
    draw(theCanvas, 50, 0, 270);
});

函数对分（上下文、度、半径、cx、cy）{
//计算圆边上的点
var x1=cx+半径*数学cos（度/180*数学PI）；
变量y1=cy+半径*数学sin（度/180*数学PI）；
//在圆的另一侧得到点
//例如，如果是90，则得到270，反之亦然
//（超级冗长但易于阅读）
如果（度>180度）{
变异度2=度-180；
}否则{
变异度2=度+180；
}
//然后计算另一侧的点
var x2=cx+半径*数学cos（度数2/180*数学PI）；
变量y2=cy+半径*数学sin（度数2/180*数学π）；
//现在我们来划清界限
context.beginPath（）；
上下文移动到（x1，y1）
context.lineTo（x2，y2）
stroke（）；
}
功能图（Canvas）{
var context=canvas.getContext（'2d'）；
//画一个大的外圆
context.beginPath（）；
context.strokeStyle=“#2222222”；
context.lineWidth=2；
arc（250250220,0，Math.PI*2，false）；
stroke（）；
closePath（）；
//较小的内圈
context.beginPath（）；
context.strokeStyle=“#2222222”；
context.lineWidth=1；
arc（250250110,0，Math.PI*2，false）；
stroke（）；
closePath（）；
对于（j=2；j<180；j=j+3）{
对分（上下文，j，220，250，250）；
}
}
$（函数（）{
var theCanvas=document.getElementById（“画布”）；
控制台日志（Canvas）；
抽签（Canvas，50，0，270）；
});

你的台词很奇怪。您没有将弧度正确地传递给函数。@nhahdh我没有尝试。这就是OP需要知道的所有内容，以获得通过中心的直线，三测函数期望弧度。当调用

sin

和

cos

而不是在整个过程中使用弧度时，将度转换为弧度的小提琴也是一个有效的解决方案。就个人而言，我希望在任何地方都使用弧度，基于τ（τ=2π）。

canvas {
    border:1px solid black;
}

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);

    // get the point on the opposite side of the circle
    // e.g. if 90, get 270, and vice versa
    // (super verbose but easily readable)
    if (degrees > 180) {
        var degrees2 = degrees - 180;
    } else {
        var degrees2 = degrees + 180;
    }

    // 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);

    // now actually draw the line
    context.beginPath();
    context.moveTo(x1, y1)
    context.lineTo(x2, y2)
    context.stroke();
}

function draw(theCanvas) {
    var context = theCanvas.getContext('2d');
    // draw the big outer circle
    context.beginPath();
    context.strokeStyle = "#222222";
    context.lineWidth = 2;
    context.arc(250, 250, 220, 0, Math.PI * 2, false);
    context.stroke();
    context.closePath();

    // smaller inner circle
    context.beginPath();
    context.strokeStyle = "#222222";
    context.lineWidth = 1;
    context.arc(250, 250, 110, 0, Math.PI * 2, false);
    context.stroke();
    context.closePath();

    for (j=2; j < 180; j = j + 3) {
        bisect(context, j, 220, 250, 250);    
    }

}
$(function () {
    var theCanvas = document.getElementById('the_canvas');
    console.log(theCanvas);
    draw(theCanvas, 50, 0, 270);
});