Question

我正在使用具有多个粒子生成器的画布游戏。粒子在创建后逐渐缩小。要从中心点向下缩放粒子，我使用的是context.translate（）方法：

context.save();
context.translate(particle.x, particle.y);
context.translate(-particle.width/2, -particle.height/2);
context.drawImage(particle.image, 0, 0, particle.width, particle.height);
context.restore();

我已经阅读了几个声称save（），translate（）和restore（）方法计算成本非常高的消息来源。我可以使用另一种方法吗？

我的游戏针对的是移动浏览器，因此我尝试尽可能优化性能。

提前致谢！

Answer 1

是的，只需在最后使用setTransform()，而不是使用保存/恢复：

//context.save();
context.translate(particle.x, particle.y);
context.translate(-particle.width/2, -particle.height/2);
context.drawImage(particle.image, 0, 0, particle.width, particle.height);
//context.restore();
context.setTransform(1,0,0,1,0,0);   // reset matrix

假设没有其他累积变换在使用中（在这种情况下，您可以重构代码以在需要时设置绝对变换）。

作为参数给出的数字是表示单位矩阵的数字，即。重置矩阵状态。

这比保存/恢复方法快得多，它不仅存储和恢复转换状态，还包括样式设置，阴影设置，剪切区域以及你拥有的内容。

您还可以将两个转换调用合并为一个调用，并使用multiply而不是divide（在CPU级别上更快）：

context.translate(particle.x-particle.width*0.5, particle.y-particle.height*0.5);

或简单地直接使用粒子“着色器”的x / y坐标而不进行翻译。

HTML5 Canvas - 相对于对象的中心进行缩放而不翻译上下文

1 个答案: