4

<canvas>JavaScript と要素で円を二等分しようとしています。この質問に対する受け入れられた回答で与えられた式を使用して、円の端にある点を見つけましたが、何らかの理由で、円の反対側にある 2 つの点 (たとえば、0 と 180、または 90 と 270) を与えると、I'円の中心を通る線が得られません。

JSFiddle で見ることができる私のコードは、素敵なスピログラフ パターンを作成します。

線が中央を通るようにするにはどうすればよいですか?

(最終的には5 分の 1 の円を描こうとしていますが、今は中心を通る線を取得する方法を尋ねているだけです。それが機能したら、円を描くための他の手順に進みます。これには明らかに線の数が減り、スパイログラフのトーラスが失われることも含まれます。)

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 に答える