javascript - Canvas 使用RequestAnimationFrame以一定速度旋转圆圈

Question

我在 JSFiddle 中做了一个快速简单的解决方案，以便更好更快地解释:

var Canvas = document.getElementById("canvas");
var ctx = Canvas.getContext("2d");

var startAngle = (2*Math.PI);
var endAngle = (Math.PI*1.5);
var currentAngle = 0;

var raf = window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame;

function Update(){
    //Clears
    ctx.clearRect(0,0,Canvas.width,Canvas.height);

    //Drawing
    ctx.beginPath();                  
    ctx.arc(40, 40, 30, startAngle + currentAngle, endAngle + currentAngle, false);

    ctx.strokeStyle = "orange";
    ctx.lineWidth = 11.0;
    ctx.stroke();

    currentAngle += 0.02;
    document.getElementById("angle").innerHTML=currentAngle;
    raf(Update);
}
raf(Update);

http://jsfiddle.net/YoungDeveloper/YVEhE/3/

当浏览器选择 fps 时，我将如何独立于帧速度旋转环。因为现在，如果速度为 30fps，它会旋转得更慢，但如果速度为 60fps，因为每次调用都会增加它的旋转量。

我从几个线程了解到它与 getTime 有关，我真的尝试了但无法完成，我需要在 10 秒内旋转一次。

另外就是 Angular ， Angular 会越来越大，时间长了就会崩溃，因为会超过可变的最大数量，那我要怎么做无缝旋转帽呢？

感谢阅读!

Answer 1

简单地使用时间差异方法将步骤锁定到新旧时间之间的差异:

DEMO

从获取当前时间开始:

var oldTime = getTime();

/// for convenience later
function getTime() {
    return (new Date()).getTime();
}

然后在你的循环中:

function Update(){

    var newTime = getTime(),       /// get new time
        diff = newTime - oldTime;  /// calc diff between old and new time
    
    oldTime = newTime;             /// update old time
    
    ...
    
    currentAngle += diff * 0.001;  /// use diff to calc angle step

    /// reset angle
    currentAngle %= 2 * Math.PI;

    raf(Update);
}

使用这种方法会将动画绑定(bind)到时间而不是 FPS。

更新 有那么一分钟，我认为修改 Angular 不适用于 float ，但您可以(必须仔细检查)所以代码已更新。