小编Joh*_*son的帖子

Canvas使用RequestAnimationFrame以特定速度旋转圆圈

我在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);
Run Code Online (Sandbox Code Playgroud)

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

当浏览器选择fps时,我如何独立于帧速旋转环.因为目前,如果速度是30fps,它将旋转得更慢,但如果速度提高60fps,因为它的旋转量是为每次调用添加的.

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

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

谢谢你的阅读!

javascript canvas rotation requestanimationframe

5
推荐指数
1
解决办法
6970
查看次数