避免在HTML5畫布中繪製半像素提高速度？

Question

我正在繪製一個畫布元素上的精靈（一個球）。然而，當球移動時，球的x或y位置可能會變成分數，例如。 （20.153; 63.638）。使用畫布繪製此圖像時，會嘗試使用透明像素使球更準確地出現在其位置上。

我想知道在抽球之前是否應該使用Math.round()，以避免透明像素的東西，並可能加速比賽。這會有幫助嗎？這場比賽是一場複雜的乒乓球比賽。

下面的圖片應該幫助我的解釋：

Answer 1

至少this guy seems to believe so。正如Gabe所說，這取決於實施。

請注意，如果您使用的是常規座標系（1，14等），某種類型的抗鋸齒似乎已經啓動了。出於這個原因，一些指南（Dive Into HTML5主要）似乎表明，通過使用半像素（即1.5，14.5等）來渲染效果更好。不過，我不知道這對性能有什麼影響。至少在渲染結果上是顯而易見的。

您可能還想嘗試各種分層方案。有關更多信息，請參閱this question。根據您的情況，您可能希望將您的對象作爲單獨的畫布處理，甚至只是將它們抵消在背景之上。

或者，您可以嘗試在一個畫布上渲染它。在這種情況下，你有一些額外的東西來跟蹤。 This library似乎爲您處理所有簿記。