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秒内旋转一次.

另一件事是,角度,它会越来越多,经过很长一段时间它会崩溃,因为可变的最大量将超过,所以我如何制作无缝旋转帽？

谢谢你的阅读!

Answer 1

只需使用时间差异方法将步骤锁定为新旧时间之间的差异：

演示版

从获取当前时间开始：

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);
}

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

更新有一分钟我认为修改角度不适用于浮动，但你可以（必须仔细检查）所以代码更新。