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

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

现实情况是requestAnimationFrame和setInterval都不会提供坚实的时机，尽管requestAnimationFrame的机会应该更好。您获得的口吃可能是由于您计算机上的其他进程，甚至是当前JS进程中的垃圾回收。

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

我看不到你所得到的口吃，所以我不知道这是否会有所改善，但是你可以看一下这里如何使用requestAnimationFrame和经过时间的实例： http://jsfiddle.net/xpZxy/

Trig问题，一个圆圈周围三角形的波涛汹涌的运动

1 个答案: