如何在画布中画出圆圈的下半部分

Question

我试图使用适当的x = cos(theta),y = sin(theta)函数绘制圆的下半部分.如果我将theta从Math.PI迭代到2*Math.PI,我似乎得到了圆圈的上半部分:

我在这段代码中做错了什么:

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

编辑:我知道弧功能.我需要以这种方式实现弧,因为这将用作更大问题的一部分,我需要计算弧的每个单独点.

Answer 1

有一个arc功能.

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 2

只需要在 r 之前加一个 - 即可

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

已测试并且有效