與矩形相比，繪製圓的效率真的很低嗎？

我正在研究JavaScript中的一個非常小的項目，只是爲了幫助我從下往上理解畫布。我現在試圖避免使用框架之類的東西，這樣我就可以理解HTML5遊戲的基本功能。與矩形相比，繪製圓的效率真的很低嗎？

這是一個相當基本的「光標動」與衰落的尾巴。而已。只是一種顏色的形狀，基於玩家的輸入而移動，尾部呈現淡淡的尾巴。我建議你嘗試一下;它實際上很漂亮。

不管怎麼說，很明顯，我寧願光標是一個圓，因爲它看起來更平滑。然而，每當我這樣做，瀏覽器幾乎完全鎖定我。它很明顯起作用，至少在很大程度上，但它比通過冷凍花生醬的烏龜慢。

我知道我不應該包括只是 JSFiddle，但它是一種很多代碼，整個事情運行緩慢。

的問題是最有可能在抽獎功能：

Game.draw = function() { 
    for (var sn = 0; sn < this.strokes.length; sn++) { 
     var s = this.strokes[sn]; 
/*1*/ this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI); 
     this.context.fillStyle = this.bgColor; 
/*2*/ //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight); 
/*1*/ //this.context.fill(); 
     this.context.fillStyle = s.getColor(); 
/*2*/ //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight); 
/*1*/ this.context.fill(); 
    } 
};

該線被標記的方法。 1對應於圓圈，而2對應於矩形。

這裏是整個項目：http://jsfiddle.net/w4Rg3/3/

我只是覺得一種很難相信它是如此令人難以置信的慢得多有圓（看到所有的JS 可以做項目之後），而我可能會做錯事。

來源

2012-11-08 River Tam

您想使用['requestAnimationFrame（）']（http://paulirish.com/2011/requestanimationframe-for-smart-animating/），而不是忙碌的等待循環。但通常情況下，您需要更多地削減代碼。我知道放棄並讓別人爲你調試你的代碼是很誘人的，但是你需要花時間精心製作一個真正的簡化測試用例，用真正需要的最少量的代碼來重現問題。在途中，你幾乎可以肯定地看到原因，在你自己的。 – Phrogz

@Progrog：謝謝你的迴應。我會嘗試更多的，但我只想指出，我實際上使用requestAnimationFrame（）。當你建議我使用忙等待循環時，不確定你指的是什麼。 –

大家好！我發現了這個問題！它與我的遊戲結構或任何特別挑剔的事情無關。只是一個API問題！

問題確實出現在我的問題的代碼示例中的第一篇文章中。

Game.draw = function() { 
    for (var sn = 0; sn < this.strokes.length; sn++) { 
     var s = this.strokes[sn]; 
/*1*/ this.context.beginPath(); /*THIS IS FIXED*/ 
/*1*/ this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI); 
/*1*/ this.context.closePath(); /*THIS IS FIXED*/ 
     this.context.fillStyle = this.bgColor; 
/*2*/ //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight); 
/*1*/ this.context.fill(); 
     this.context.fillStyle = s.getColor(); 
/*2*/ //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight); 
/*1*/ this.context.fill(); 
    } 
};

我一定要用「THIS IS FIXED」評論來標記我添加的行。我假設它以前只是創造了一個非常長的弧線並反覆繪製，但誰知道呢？無論如何，問題解決了，它看起來很漂亮。

來源

2012-11-10 09:25:03

只是一對夫婦的意見（呵呵，沒有畫圓不是「低效」相比，廣場，一定要慢！ - 但還是相當快的）你的問題很遺憾運行得更深的是的..

會似乎你需要重新考慮你計劃實施遊戲的方式。它像你一樣簡潔地放置它，比通過冷凍花生醬的烏龜慢。（hehe，niice！）

我懷疑這與您設置請求動畫幀的方式有關，但實際上無法進行調試，無需擔心我的筆記本電腦會熔化並散發出神奇的藍煙。

我修剪所有的JS從一個副本，其中的關鍵變量的異常，2調用添加事件偵聽器KEYUP和KEYDOWN。這給我留下了以下幾點：

<!DOCTYPE HTML> 
<html> 
<head> 
<title>flowing</title> 
<script> 

var Key = 
{ 
    _pressed: {}, 

    SPACE: 32, 
    LEFT: 37, 
    UP: 38, 
    RIGHT: 39, 
    DOWN: 40, 

    isDown: function(keyCode) { 
     return this._pressed[keyCode]; 
    }, 

    onKeydown: function(event) { 
     this._pressed[event.keyCode] = true; 
     console.log(this._pressed[event.keyCode]); 
    }, 

    onKeyup: function(event) { 
     delete this._pressed[event.keyCode]; 
     console.log(this._pressed[event.keyCode]); 
    } 
}; 
window.addEventListener('keyup', Key.onKeyup, false); 
window.addEventListener('keydown', Key.onKeydown, false); 

</script> 
<style> 
</style> 
</head> 
<!-- canvas gets inserted here by js --> 
<body > 
</body>  
</html>

炸彈，大時間！

你會發現，當你附加一個事件監聽器時，無論你處在處理函數中，'this'關鍵字實際上對應於觸發事件的HTML元素。那麼，這到底意味着什麼？

在其內部的3個功能可被擴展爲：

返回window._pressed [鍵代碼];

window._pressed [event.keyCode] = true;

delete window._pressed [event。關鍵代碼];

唯一的問題是，窗口對象沒有_pressed變量。變量Key做。

您應該打開您使用的任何瀏覽器的開發工具控制檯。在Chrome，FF和Opera中，它是Ctrl-Shift-I，在IE中它是F12。

這會立即突出顯示諸如此類的錯誤。

我會看看我是否找不到冰山，所以我可以繼續測試，而不必擔心需要購買新的lappy。

[編輯：用於Game.draw

Game.draw = function() { for (var sn = 0; sn < this.strokes.length; sn++) { var s = this.strokes[sn]; /*1*/ this.context.beginPath(); this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI); this.context.fillStyle = s.getColor(); //.bgColor; /*2*/ this.context.closePath(); this.context.fill(); } };

繪製圓弧新代碼涉及的路徑。要正確使用路徑，需要在開始定義路徑時告訴canvas元素，並在完成定義路徑時再次告訴canvas元素。我猜瀏覽器剛剛結束了'所有路徑之母'，這自然是永遠不會畫出來的。當然，你的道路是簡單的，簡單的圓圈。隨着我們的意圖正確地更新畫布的狀態機，無論我們繪製圓形還是正方形，代碼在響應性上都沒有什麼不同。希望這是你問題的根源。 :)

來源

2012-11-08 05:05:34 enhzflep

感謝您的回覆。也就是說，我實際上沒有從開發者控制檯收到任何錯誤。我不確定自己是否清楚這一點（你可能是對的，我的遊戲環路不好），但遊戲運行得非常好，甚至非常順利地用矩形。我相當肯定當在這個上下文中使用'this'關鍵字時，實際上是指調用該函數的JavaScript對象。「這個」根本沒有爲我提供任何幫助。如果您認爲這會導致效率低下，那麼這可能是有道理的，但它確實定位正確。 –

快樂。嗯 - 我明白你的意思了。你知道剛剛發生在我身上嗎？你不調用this.context.beginPath（）或this.context.endPath（）。我只是添加了他們每一個，並且可以看到在正方形和圓圈的表現方面沒有什麼區別。我反對包括我的Game.draw函數。 :) – enhzflep

是的，我在評論後不久就想到了這一點。 :)檢查我的問題答案。 –

與矩形相比，繪製圓的效率真的很低嗎？

回答

相關問題