javascript - 在 html Canvas 中从线 Angular 和 x 正轴创建基于圆

Question

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

这是一个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();

注意:有两个点可以移动。(已经工作)

以下是示例输出:

Answer 1

在笛卡尔坐标中，您可以得到从中心 M 到点 A 的线段的(视觉、数学正向) Angular ，如下所示

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

<小时/>

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

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

应该给出正确的弧度。