三角问题，三角形绕圆的波动运动

Question

下面的代码应该围绕“看不见的”圆圈旋转三角形。它的工作正如我的预期，但是，三角形有时似乎在这个“圆”周围结结巴巴。这个东西的CPU和内存负载似乎没问题，所以我想知道这是否是舍入和绘图的问题...帮助赞赏。
PS 我正在使用 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/< /a> 有关 requestAnimationFrame 以及为什么使用它的说明。

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

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

我看不到您遇到的卡顿，所以我不知道这是否会有所改进，但您可以在此处查看如何使用 requestAnimationFrame 和经过时间的实时示例： http://jsfiddle.net/xpZxy/