HTML и Javascript: анимация орбиты номера часов запаздывает через 1 секунду

Я немного подправил код, чтобы лучше контролировать скорость.

Вот в чем суть:

1. Вращение здесь является потребителем времени, и использование поворота 4 * 12 и перемещения 2 * 12 для возврата холста в его положение может сделать процесс дольше, чем временной интервал. Таким образом, сохранение состояния холста перед вращением и восстановлением может уменьшить количество вращений на 2 * 12 и перемещение на 1 * 12. (См. обновленный ответ, в котором удалены все повороты и переводы)
2. частота кадров может меняться в зависимости от производительности системы. Если вам нужна постоянная скорость в любых состояниях, вам понадобится deltaTime между таймфреймами. Таким образом, в ситуациях с низкой производительностью (например, высокая загрузка процессора) частота кадров уменьшается, deltaTime увеличивается, и ваш счетчик вращения должен быть больше. В ситуациях с высокой производительностью deltaTime меньше, а RotationCounter должен быть меньше.

let lastTime = 0;
let speed = 60;

const clk = document.getElementById("clock").getContext("2d");

clk.font = "20px Arial";
clk.strokeStyle = "black";
clk.textAlign = "center";

let rotationCounter = 0; 

function drawNumbers(timestamp) {

    if (!lastTime) lastTime = timestamp;

    let deltaTime = timestamp - lastTime;  // calculate the deltatime here
    lastTime = timestamp;                

    clk.clearRect(0, 0, 400, 400);  
    clk.fillStyle = "lightgrey";
    clk.arc(200, 200, 180, 0, Math.PI * 2);
    clk.fill();

    clk.fillStyle = "black";             
    clk.translate(200, 200); 
                                                            
    for (let i = 1; i < 13; i++) {

        let ang = (i * 30) + rotationCounter;

        clk.save(); // Store the state here
        clk.rotate(ang * Math.PI / 180);
        clk.translate(0, -150);

        clk.rotate((-ang * Math.PI) / 180);
        clk.fillText(i.toString(), 0, 0);        

        clk.restore();    // Reset it to previous position
    }

    clk.translate(-200, -200); 

    rotationCounter += speed * deltaTime / 1000; // this line controls the speed

    if (rotationCounter >= 720) {
        return;            
    }

    window.requestAnimationFrame(drawNumbers);

}

window.requestAnimationFrame(drawNumbers);
            

Обновление 1

Измените внутри цикла, как показано ниже, чтобы удалить все вращения внутри цикла. Больше не нужно сохранять холст и восстанавливать его.

for (let i = 1; i < 13; i++) {

    let ang = (i * 30) + rotationCounter;

    let newX = 150 * Math.cos(ang * Math.PI / 180);
    let newY = 150 * Math.sin(ang * Math.PI / 180);

    clk.fillText(i.toString(), newX, newY);        
}

Обновление 2

На основе комментария @Kaiido и дублированной ссылки, добавляющей BeginPath, проблема будет решена, а также предотвращено мигание круга.

    clk.beginPath();
    clk.clearRect(0, 0, 400, 400);     
    clk.fillStyle = "lightgrey";
    clk.arc(200, 200, 180, 0, Math.PI * 2);
    clk.fill();
    clk.closePath();