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

我正在开发具有多个粒子生成器的 Canvas 游戏。粒子在创建后逐渐缩小。为了从它们的中心点缩小粒子，我使用了 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() 方法在计算上非常昂贵。有没有我可以使用的替代方法？

我的游戏是针对移动浏览器的，所以我试图尽可能地优化性能。

提前致谢!

最佳答案

是的，只需在最后使用 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

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

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

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

您还可以将两个翻译调用合并为一个调用，并使用乘法而不是除法(这在 CPU 级别要快得多):

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

或者简单地将 x/y 坐标直接与粒子“着色器”一起使用，根本不进行平移。

关于javascript - HTML5 Canvas - 在不翻译上下文的情况下相对于对象的中心进行缩放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27250227/