我在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秒内旋转一次.
另一件事是,角度,它会越来越多,经过很长一段时间它会崩溃,因为可变的最大量将超过,所以我如何制作无缝旋转帽?
谢谢你的阅读!