Cómo dibujar la mitad inferior de un círculo en lienzo

Question

Estoy tratando de dibujar la mitad inferior del círculo usando las funciones apropiadas x = cos (theta), y = sin (theta). Si itero Theta de Math.Pi a 2*Math.pi, parece que estoy obteniendo la mitad superior del círculo:

¿Qué estoy haciendo mal en este fragmento de código:

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

EDITAR: Soy consciente de la función ARC. Necesito implementar el arco de esta manera porque esto se utilizará como parte de un problema mayor en el que necesito calcular cada punto individual del arco.

Answer 1

Solo pon un - antes r

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

Probado y funciona

Answer 2

Hay un arcfunción.

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

Necesitas cambiar el comienzo a 0, y el final de Math.Pi

No estoy seguro de por qué, pero parece que el lienzo pasa en sentido horario, no en sentido antihorario.

Vea aquí para un ejemplo: http://jsfiddle.net/kvazb/1/

La solución anterior funciona, pero no es la solución correcta. Nueva solución a continuación:

EDITAR

Ajá, el comentario de Roger lo explica. Las coordenadas de lienzo comienzan con 0,0 como la esquina superior izquierda, no la esquina inferior izquierda. Por lo tanto, necesitas voltear tu computeY función.

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

cambios a

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

Answer 4

Hay una función que hacer por ti, 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

Supongo rápido, intente cambiar el signo (si está usando coords relativos positivos, intente usar negativos)