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

HTML5 Canvas - Scaling relative to the center of an object without translating context

本文关键字：缩放 上下文 翻译 画布 相对于 对象 HTML5      更新时间：2023-09-26

我正在开发一个具有多个粒子生成器的画布游戏。粒子在创建后逐渐缩小。为了将粒子从它们的中心点缩小，我正在使用 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 坐标直接与粒子"着色器"一起使用，而无需进行任何转换。

相关文章：