避免在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似乎为您处理所有簿记。