Question

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

enter image description here

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

    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

~~您需要将开头更改为0，将结束点更改为Math.Pi~~

~~不太清楚为什么，但看起来帆布是顺时针方向，而不是逆时针方向。~~

~~在此处查看示例：http://jsfiddle.net/kvAzb/1/~~

以上解决方案有效，但不是正确的解决方案。下面的新解决方案：

修改

Aha，Roger的评论解释了这一点。画布坐标以0,0作为左上角，而不是左下角。因此，您需要翻转computeY功能。

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

更改为

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

Answer 3

只需输入 - 在r之前

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

经过测试并且可以正常使用

Answer 4

有一项功能可以帮到你，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

快速猜测，尝试更改标志（如果你使用正相对坐标，尝试使用底片）

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

5 个答案: