4

我正在尝试用 JavaScript 和一个<canvas>元素平分一个圆圈。我使用这个问题的已接受答案中给出的公式来查找圆边缘上的点，但由于某种原因，当我在圆上给出两个相反的点（例如 0 和 180，或 90 和 270）时，我' m 没有得到一条穿过圆心的线。

我的代码（您可以在 JSFiddle 上看到）创建了一个很好的 Spirograph 模式，这很酷，但我不想这样做。

我该如何解决这个问题，让线条穿过中心？

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

4

2 回答 2

4

Javascript 中的度数以弧度指定。不是检查大于或小于 180 以及添加或减去 180，而是对Math.PI弧度执行相同操作。

http://jsfiddle.net/7w29h/1/

于 2013-02-19T04:50:42.887 回答
2

中的绘图函数和三角函数Math期望以弧度而不是度数指定角度。

演示

与您当前的代码不同：

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

附录

这是来自 JSFiddle 的完整源代码，请保留完整副本以防万一。

HTML

<canvas id="the_canvas" width="500" height="500"></canvas>

CSS

canvas {
    border:1px solid black;
}

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);
});
于 2013-02-19T05:06:18.737 回答