在 html 画布中从直线角度和 x 正轴创建一个圆形答案

【问题标题】：Create a Circle Based from a line angle and x-positive axis in html canvas在 html 画布中从直线角度和 x 正轴创建一个圆形
【发布时间】：2016-02-06 08:09:37
【问题描述】：

基本上我知道如何创建线的概念，但我在如何为这种界面中的角度值和圆制定逻辑时遇到困难。

这是sample

semicirc = 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 = 0;
            context.lineTo(computeX(start, r, j, k), computeY(start, r, j, k));
            for(var theta = start; theta <= (Math.PI); theta += .1) 
            {
                x = computeX(theta, r, j, k);
                y = computeY(theta, r, j, k),

                context.lineTo(x, y);
            }
            context.stroke();
            context.closePath();
        }
    }
}
semicirc();

注意：有两个点可以移动。（已经工作）

这里是示例输出：

【问题讨论】：

标签： javascript html math canvas html5-canvas

【解决方案1】：

在笛卡尔坐标中，您可以得到从中心 M 到点 A 的线段的（视觉的、数学上正向的）角度

dy = M.y - A.y;
dx = A.x - M.x:
phi = atan2(dy,dx);

画布弧使用笛卡尔坐标系，而不考虑在屏幕坐标中它在 x 轴上翻转。因此，要获得phi 的视角，内部必须使用-phi。

counterclock = ( -phi < 0 );
ctx.arc(M.x, M.y, Radius, 0, -phi, counterclock);

应该给出正确的弧线。

【讨论】：