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