我在 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 会越来越大,时间长了就会崩溃,因为会超过可变的最大数量,那我要怎么做无缝旋转帽呢?
感谢阅读!
最佳答案
简单地使用时间差异方法将步骤锁定到新旧时间之间的差异:
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 ,但您可以(必须仔细检查)所以代码已更新。
关于javascript - Canvas 使用RequestAnimationFrame以一定速度旋转圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20445357/