如何做一个90度的圆

Question

所以，我在1年内做了processingjs，我想我会从纯javascript开始，现在在锁定，我已经编码Javascript 2个月了，我已经做了很多老街机游戏的混音。

但是昨天我很无聊，我就想嘿嘿，我可以做一个像加载屏幕一样的屏幕，于是我就做了，我做了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年代游戏中的加载文本，如加载-> 加载。-> Loading... -> Loading...。->再来一遍。我知道有problaby一个更有效的方法让我做到这一点，但是是的。

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

请记住，那是两个不同的画布。然后这一天，我有一个非常酷的东西，我想做一个像微软的登录屏幕，圆圈。我的想法不是要做一个很酷的过渡，而是更像我的加载文本，我做了一个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