三角问题，三角形围绕圆圈的起伏运动

Question

下面的代码应该围绕一个“不可见”的圆圈旋转一个三角形。它按我的预期工作，但是，三角形有时似乎在这个“圆圈”周围结结巴巴。这东西的 CPU 和内存负载似乎还可以，所以我想知道这是否是舍入和绘图的问题......感谢帮助。
P.S 我正在使用 SetInterval 来建立帧速率。我正在尝试做的事情需要> 30的帧速率。 谢谢。

var canvas = document.getElementById("game_area");
var context = canvas.getContext("2d");

var angle = 0;

var SinA = Math.sin(Math.PI);
var CosA = Math.cos(Math.PI);

var SinB = Math.sin(Math.PI-0.087);
var CosB = Math.cos(Math.PI-0.087);

var SinC = Math.sin(Math.PI+0.087);
var CosC = Math.cos(Math.PI+0.087);

canvas.width = 700;
canvas.height = 700;

var half = (canvas.width/2);

function on_enter_frame(){

    SinA = Math.sin(Math.PI+angle);
    CosA = Math.cos(Math.PI+angle);

    SinB = Math.sin(Math.PI-0.087+angle);
    CosB = Math.cos(Math.PI-0.087+angle);

    SinC = Math.sin(Math.PI+0.087+angle);
    CosC = Math.cos(Math.PI+0.087+angle);

    angle+=0.05;

    if (angle>(Math.PI*2)){
        angle=0;
    }

    context.clearRect(0,0,500,500);

    context.fillStyle = "#FFF";

    context.beginPath();
    context.moveTo(half+(SinA*50), half+(CosA*50));
    context.lineTo(half+(SinB*45), half+(CosB*45));
    context.lineTo(half+(SinC*45), half+(CosC*45));
    context.closePath();
    context.fill();
}

setInterval(on_enter_frame,30);

Answer 1

请参阅http://paulirish.com/2011/requestanimationframe-for-smart-animating/，了解 requestAnimationFrame 以及使用它的原因。

现实情况是requestAnimationFrame 和setInterval 都不会提供坚如磐石的时机，尽管requestAnimationFrame 的机会应该会更好。您遇到的卡顿可能是由于您计算机上的其他进程，甚至是您当前 JS 进程中的垃圾收集。

由于您的循环时间永远不会可靠，因此最好将动画（在本例中为轨道三角形的位置）基于实际时间（或自上一帧以来经过的时间）。

我看不到您遇到的口吃，所以我不知道这是否会有所改进，但您可以在此处查看如何使用 requestAnimationFrame 和经过时间的实时示例：@987654322 @