觸發問題，一個圓周上三角形的運動波動

下面的代碼應該圍繞一個「不可見」的圓圈旋轉一個三角形。它正在按照我的意圖工作，但是，有時三角形似乎在這個「圓圈」周圍結結巴巴。這個東西的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);

來源

2011-09-17 Jonh Taco

你有沒有考慮過使用分層畫布？或許太多的東西正在重繪？ – tjameson

您不應該在動畫中使用'setInterval'。您應該使用'requestAnimationFrame'來代替。它在大多數現代瀏覽器中都得到支持。 [Microsoft Demo]（http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/Default.html），[MDN]（https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame） –

tjameson ：只有一件事情正在繪製，分層畫布將如何提供幫助？ @Derek：我會研究requestAnimationFrame，你認爲這可能是由於我的問題？ –

爲requestAnimationFrame的解釋和爲什麼要使用它，請參閱http://paulirish.com/2011/requestanimationframe-for-smart-animating/。

現實情況是，和setInterval都不會提供堅如磐石的時機，儘管的機會應該會更好。你得到的口吃可能是由於你的計算機上的其他進程，甚至是當前JS進程中的垃圾收集。由於你的循環時間永遠不會可靠，所以最好根據實際時間（或自上一幀以來所經過的時間），將動畫（在此情況下爲三角形軌道的位置）作爲基礎。

我看不出你得到口吃，所以我不知道這是否將是一個進步，但你可以看看如何和使用時間都在這裏使用一個活生生的例子：http://jsfiddle.net/xpZxy/

來源

2011-09-17 03:39:31 brainjam

感謝healp，但不幸的是，即使在您的FiddleJS示例中，我仍然會看到抖動。我正在使用Firefox 5.0，但我想這一定是我的電腦，然後... –

@jonh是位置或方向或形狀的口吃/抖動？ – brainjam

編號說主要的位置，三角形似乎暫停然後「跳過一步」以彌補其空閒。我嘗試了四捨五入的術語，改變速度和幀率，但似乎沒有任何工作。 –

觸發問題，一個圓周上三角形的運動波動

回答

相關問題