下面的代码应该围绕一个“看不见的”圆圈旋转一个三 Angular 形。它按照我的预期工作,但是,三 Angular 形有时似乎会在这个“圆圈”周围结结巴巴。这个东西的CPU和内存负载似乎还可以,所以我想知道这是否是四舍五入和绘图的问题……感谢帮助。
P.S 我正在使用 SetInterval 来建立帧率。我想要做的事情需要 >30 的帧率。
谢谢。
var canvas = document.getElementById("game_area");
var context = canvas.getContext("2d");
var angle = 0;
var SinA = Math.sin(Math.PI);
var CosA = Math.cos(Math.PI);
var SinB = Math.sin(Math.PI-0.087);
var CosB = Math.cos(Math.PI-0.087);
var SinC = Math.sin(Math.PI+0.087);
var CosC = Math.cos(Math.PI+0.087);
canvas.width = 700;
canvas.height = 700;
var half = (canvas.width/2);
function on_enter_frame(){
SinA = Math.sin(Math.PI+angle);
CosA = Math.cos(Math.PI+angle);
SinB = Math.sin(Math.PI-0.087+angle);
CosB = Math.cos(Math.PI-0.087+angle);
SinC = Math.sin(Math.PI+0.087+angle);
CosC = Math.cos(Math.PI+0.087+angle);
angle+=0.05;
if (angle>(Math.PI*2)){
angle=0;
}
context.clearRect(0,0,500,500);
context.fillStyle = "#FFF";
context.beginPath();
context.moveTo(half+(SinA*50), half+(CosA*50));
context.lineTo(half+(SinB*45), half+(CosB*45));
context.lineTo(half+(SinC*45), half+(CosC*45));
context.closePath();
context.fill();
}
setInterval(on_enter_frame,30);
最佳答案
参见 http://paulirish.com/2011/requestanimationframe-for-smart-animating/有关 requestAnimationFrame 的解释以及使用它的原因。
现实情况是,requestAnimationFrame
和 setInterval
都无法提供可靠的计时,尽管使用 requestAnimationFrame
的机会应该更大。你遇到的卡顿可能是由于你计算机上的其他进程,甚至是你当前 JS 进程中的垃圾回收。
由于您的循环计时永远不会可靠,因此最好根据实际时间(或自上一帧以来耗时)来制作动画(在本例中为绕行三 Angular 形的位置)。
我看不到你遇到的卡顿情况,所以我不知道这是否会有所改善,但你可以查看一个实例,了解 requestAnimationFrame
和运行时间如何此处使用:http://jsfiddle.net/xpZxy/
关于javascript - 三 Angular 问题,三 Angular 形绕圆的不稳定运动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7451911/