如何做一个90度的圆

Question

所以我在 1 年内完成了 processingjs，我想我会从纯 javascript 开始，现在处于锁定状态，我已经编码 Javascript 两个月了，我已经做了很多旧街机游戏的混音。

但是昨天我很无聊，我想嘿嘿，我可以做一个类似的加载屏幕。所以我做了，我做了 3 个画布，一个在屏幕的顶部，有一个从左到右的矩形，每当矩形从屏幕上消失时，我会把它拿回来，以便它再次从左侧开始，该代码看起来像这样

        const c = document.getElementById("loadingRect");
        const ctx = c.getContext("2d");
        var x = 10;
        function drawSomething() {
            ctx.beginPath();
            ctx.rect(x, 5, 100, 5);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();
        }
        function draw() {
            ctx.clearRect(0,0,c.width,c.height);
            drawSomething();
            x+=10;
            if(x>c.width) {
                x=-100
            }
            requestAnimationFrame(draw);
        }
        draw();

然后我又做了一个脚本（就是为了方便自己写代码）。我确实喜欢 90 年代游戏中的加载文本，例如加载 -> 加载。 -> 正在加载.. -> 正在加载... -> 一遍又一遍。我知道我可能有更有效的方法来做到这一点，但是是的。

        const canvas = document.getElementById("loadingText");
        const ctx2 = canvas.getContext("2d");
        var time = 0;
        function loadingText() {
            ctx2.font = "30px Arial";
            ctx2.fillText("Loading", 140, 210);
        }
        function dot1() {
            ctx2.font = "30px Arial";
            ctx2.fillText(".", 245, 210);
        }
        function dot2() {
            ctx2.font = "30px Arial";
            ctx2.fillText(".", 250, 210);
        }
        function dot3() {
            ctx2.font = "30px Arial";
            ctx2.fillText(".", 255, 210);
        }
        function draw2() {
            ctx2.clearRect(0,0,canvas.width,canvas.height);
            loadingText();
            if(time >= 60) {
                dot1();
            }
            if(time >= 120) {
                dot2();
            }
            if(time >= 180) {
                dot3();
            }
            if(time >= 240) {
                time = 0;
            }
            // I could use here time++; i know
            time += 1;
            requestAnimationFrame(draw2); 
        }
        draw2();

请记住，这是两幅不同的画布。然后今天我有了一个非常酷的东西，我想做一个像 Microsoft 登录屏幕一样的圆圈。我的想法不是做一个很酷的过渡，而是更像是我的加载文本，我在那里做了一个 4、90 度的圆圈，但它们必须像从顶部开始到右边结束，从右边开始到底部结束，我希望你能理解，所以我尝试了这个。

        const canv = document.getElementById("loadingCircle");
        const ctx3 = canv.getContext("2d");

        function loadingCircle1() {
            ctx3.beginPath();
            ctx3.arc(200, 200, 75, 0, Math.PI/2);
            ctx3.stroke();
            ctx3.closePath();
        }
        // This was my other try
        function loadingCircle2() {
            ctx3.beginPath();
            ctx3.arc(200, 200, 75, 90, Math.PI/2);
            ctx3.stroke();
            ctx3.closePath();
        }
        // Test for now to see if they are 90 degrees
        loadingCircle1();
        loadingCircle2();

但这不起作用，因为圆圈不会从顶部、底部和左侧开始。在那里我的计划被破坏了，我在半小时内尝试了不同的值，但它没有用，所以我去这里寻求帮助。

我不是说我要求代码或其他东西，我只是想再知道圆圈中最后两个参数的值 3 次，以便它们一起构建一个完美的圆形和漂亮的圆圈。

（请原谅我的英语不好）

Answer 1

为了给出一个简单的答案，您需要的弧度值为：

Top: -(Math.PI / 2)
Right: 0
Bottom: Math.PI / 2
Left: Math.PI

如何做一个90度的圆

How to make a 90 degrees circle

javascript

geometry

degrees

automatic-ref-counting