How to draw bottom half of a circle in canvas

问题:

I am trying to draw the the bottom half of the circle using the appropriate x=cos(theta), y=sin(theta) functions. If I iterate theta from Math.PI to 2*Math.PI I seem to be getting the upper half of the circle instead:

What am I doing wrong in this code snippet:

    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: I am aware of the arc function. I need to implement the arc this way because this will be used as part of a bigger problem where I need to compute each individual point of the arc.

回答1:

Just put a - before r

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

Tested and it works

回答2:

There is an 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();

回答3:

You need to change the start to 0, and the end point to Math.Pi

Not quite sure why, but it appears that canvas goes clockwise, not anticlockwise.

See here for an example: http://jsfiddle.net/kvAzb/1/

Above solution works, but it not the correct solution. New solution below:

EDIT

Aha, Roger's comment explains it. Canvas coordinates start with 0,0 as the top-left corner, not the bottom-left corner. You therefore need to flip your computeY function.

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

changes to

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

回答4:

There is a function to do just do for you, 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/

回答5:

quick guess, try changing the sign(if you're using positive relative coords, try using negatives)