将避免在HTML5画布中绘制半像素提高速度吗?

前端之家收集整理的这篇文章主要介绍了将避免在HTML5画布中绘制半像素提高速度吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在画布元素上绘制一个sprite(一个球).然而,当球移动时,球的x或y位置可能变成分数,例如. (20.153; 63.638).当使用画布绘制此图像时,它会尝试使用透明像素使球更准确地出现在其位置.

我想知道是否应该在绘制球之前使用Math.round()来避免透明像素的东西,并且可能会加速游戏.这会有多大帮助吗?这场比赛是一场复杂的乒乓球比赛.

下面的图片应该有助于我的解释:

解决方法

至少 this guy seems to believe so.正如加布所说,这取决于实施情况.

请注意,如果您使用常规坐标(1,14等),某些排序抗锯齿似乎会启动.出于这个原因,一些指南(主要是Dive Into HTML5)似乎表明你最好通过使用半像素(即1.5,14.5等)进行渲染.不过,我不知道这是否会对性能产生任何影响.它至少在渲染结果上很明显.

您可能还想尝试各种分层方案.有关更多信息,请参见this question.根据您的情况,您可能希望将对象视为单独的画布,并在背景上将它们偏移.

或者,您可以尝试在一个画布上渲染所有内容.在这种情况下,你有一些额外的东西要跟踪. This library似乎为您处理所有簿记.

猜你在找的HTML5相关文章