根据 html canvas 中的直线角度和 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);

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

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

应该给出正确的弧度。

根据 html canvas 中的直线角度和 x 正轴创建圆

Create a Circle Based from a line angle and x-positive axis in html canvas

html

javascript

math

canvas

html5-canvas