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

Question

我正在开发一款具有多个粒子发生器的 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() 方法的计算量非常大。我可以使用其他方法吗？

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

提前致谢!

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

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

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

这比保存/恢复方法快得多，保存/恢复方法不仅存储和恢复变换状态，还存储和恢复样式设置、阴影设置、裁剪区域等等。

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

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

或者直接将 x/y 坐标与粒子“着色器”一起使用，根本不进行任何转换。