Wie man die untere Hälfte eines Kreises in Leinwand zeichnet

Question

Ich versuche, die untere Hälfte des Kreises mit den entsprechenden X = cos (Theta) zu zeichnen, y = sin (theta). Wenn ich Theta von math.pi bis 2*math.pi iteriere, scheine ich stattdessen die obere Hälfte des Kreises zu bekommen:

Was mache ich in diesem Code -Snippet falsch:

    window.onload = function() 
    {
        var canvas = document.getElementById('circle-canvas');

        if (canvas && canvas.getContext) {
            var context = canvas.getContext('2d');
            if (context) {
                context.strokeStyle = "#369";
                context.lineWidth = 4;


                j = canvas.width / 2;
                k = canvas.height / 2;
                r = canvas.width / 4; 

                function computeX(theta, r, j, k){ return r * Math.cos(theta) + j; }
                function computeY(theta, r, j, k){ return r * Math.sin(theta) + k; }

                start = Math.PI;
                context.lineTo(computeX(start, r, j, k), computeY(start, r, j, k));
                for(var theta = start; theta <= (2*Math.PI); theta += .1) 
                {
                    x = computeX(theta, r, j, k);
                    y = computeY(theta, r, j, k),

                    context.lineTo(x, y);
                }
                context.stroke();
                context.closePath();
            }
        }
    }

Bearbeiten: Ich bin mir der ARC -Funktion bewusst. Ich muss den ARC auf diese Weise implementieren, da dies als Teil eines größeren Problems verwendet wird, bei dem ich jeden einzelnen Punkt des Bogens berechnen muss.

Answer 1

Einfach ein - vor r

y = computeY(theta, -r, j, k),

Getestet und es funktioniert

Answer 2

Da ist ein arcFunktion.

var canvas = document.getElementById("circle-canvas");
var context = canvas.getContext("2d");

var centerX = canvas.width / 2; 
var centerY = canvas.height / 4; 

var radius = canvas.width / 4; 

// I think these values are the angles for the bottom half - otherwise use other values
var startingAngle = Math.PI;
var endingAngle = 0;
var counterclockwise = true;

context.arc(centerX, centerY, radius, startingAngle,
    endingAngle, counterclockwise);

context.lineWidth = 4;
context.strokeStyle = "#369";
context.stroke();

Answer 3

Sie müssen den Start ändern 0, und der Endpunkt zu Math.Pi

Ich bin mir nicht ganz sicher, warum, aber es scheint, dass Leinwand im Uhrzeigersinn und nicht gegen den Uhrzeigersinn geht.

Ein Beispiel finden Sie hier: http://jsfiddle.net/kvazb/1/

Die obige Lösung funktioniert, aber nicht die richtige Lösung. Neue Lösung unten:

BEARBEITEN

Aha, Rogers Kommentar erklärt es. Leinwandkoordinaten beginnen mit 0,0 als obere linke Ecke, nicht mit der unteren linken Ecke. Sie müssen daher Ihre umdrehen computeY Funktion.

function computeY(theta, r, j, k){ return r * Math.sin(theta) + k; }

Änderungen zu

function computeY(theta, r, j, k){ return canvas.height - (r * Math.sin(theta) + k); }

Answer 4

Es gibt eine Funktion, die Sie nur für Sie tun können, arc.

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.arc(256, 128, 128, Math.PI, 0, true);
context.stroke();

http://jsfiddle.net/9maq5/

Answer 5

Schnellraten, ändern Sie das Zeichen (wenn Sie positive relative Koordnungen verwenden, verwenden Sie Negative).