Come disegnare metà inferiore di un cerchio in canvas

Question

Sto cercando di disegnare le funzioni la metà inferiore del cerchio utilizzando gli appositi x = cos (theta), y = sin (theta). Se io iterate theta da Math.PI a 2 * Math.PI mi sembra di essere sempre la metà superiore del cerchio, invece:

Che cosa sto facendo di sbagliato in questo frammento di codice:

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

EDIT: Sono consapevole della funzione ARC. Ho bisogno di attuare l'arco questo modo perché questo sarà utilizzato come parte di un problema più grande dove devo calcolare ogni singolo punto dell'arco.

Answer 1

Basta mettere un - prima di r

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

Testato e funziona

Answer 2

C'è un arcfunction.

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

È necessario modificare l'inizio di 0, e il punto finale a Math.Pi

Non del tutto sicuro perché, ma sembra che di tela va in senso orario, non in senso antiorario.

Vedi qui per un esempio: http://jsfiddle.net/kvAzb/ 1 /

opere soluzione di cui sopra, ma non la soluzione corretta. Nuova soluzione qui di seguito:

Modifica

Ah, il commento di Roger spiega. coordinate tela iniziano con 0,0 come l'angolo in alto a sinistra, non è l'angolo in basso a sinistra. È quindi necessario capovolgere la funzione computeY.

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

cambia in

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

Answer 4

C'è una funzione di fare proprio fare per voi, 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

indovinare rapida, provare a cambiare il segno (se si sta utilizzando coordinate relative positivi, provare a utilizzare negativi)