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

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坐标而不进行任何翻译。