根据html画布中的线角和x正轴创建圆

Question

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

这是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的分段（视觉上，数学上取向位置）角度

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

应该给出正确的弧度。