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(); 

Я прочитал несколько источников, которые утверждают, сохранения(), перевод() и восстановление() методы довольно вычислительно дорогой. Есть ли альтернативный метод, который я могу использовать?

Моя игра предназначена для мобильных браузеров, поэтому я стараюсь как можно больше оптимизировать работу.

Заранее благодарен!

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 

Предполагая, что нет никакой другой накопленная преобразования используется (в этом случае вы можете реорганизовывать код, чтобы установить абсолютные преобразования, где это необходимо).

Цифрами, приведенными в качестве аргумента, являются числа, представляющие единичную матрицу, т.е. состояние матрицы сброса.

Это намного быстрее, чем подход сохранения/восстановления, который хранит и восстанавливает не только состояние преобразования, но и настройки стиля, настройки тени, область отсечения и то, что у вас есть.

Вы также могли бы объединить два перевода вызовов в один вызов, и использовать многократно вместо разрыва (что гораздо быстрее, на уровне процессора):

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

или просто использовать х/координату непосредственно с частичный «шейдер» без перевода вообще.