画布使用RequestAnimationFrame以一定速度旋转圆

JohnPeterson 发表于 Dev

约翰·彼得森

我在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秒内旋转一次。

另一件事是，角度会越来越大，并且在很长一段时间后会崩溃，因为会超出可变的最大量，那么我该如何使无缝旋转瓶盖实现？

感谢您的阅读！

用户名

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

演示

从获取当前时间开始：

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