如何在画布中绘制圆的下半部分答案

【问题标题】：How to draw bottom half of a circle in canvas如何在画布中绘制圆的下半部分
【发布时间】：2012-01-08 22:05:10
【问题描述】：

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

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

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

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

【问题讨论】：

为什么期望得到下半圈？比较通常使用的坐标系和画布上使用的坐标系（增加 y 坐标是向上还是向下？）

标签： javascript math geometry html5-canvas

【解决方案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();

【讨论】：

【解决方案2】：

在 r 之前放一个 -

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

测试成功

【讨论】：

它确实有效，但你知道它为什么有效吗？感觉更像是 hack。
它将世界位置设为负数。
@Ramin 在画布上，0,0 是左上角。你假设右下角。这更正了它。

【解决方案3】：

~~需要将起点改为0，终点改为Math.Pi~~

不太清楚为什么，但画布似乎是顺时针而不是逆时针。

查看示例：http://jsfiddle.net/kvAzb/1/

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

编辑

啊哈，罗杰的评论解释了这一点。画布坐标从 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); }

【讨论】：

忘记了那个怪癖。谢谢。 :)

【解决方案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/

【讨论】：

【解决方案5】：

快速猜测，尝试更改符号（如果您使用正相对坐标，请尝试使用负数）

【讨论】：