дорогой градиент контекста HTML5?

Question

При каждом движении мыши мне нужно нарисовать на холсте радиальный градиент (ну, круг, заполненный радиальным градиентом с конусом, центрированным внутри круга) с центром в текущей позиции мыши.

Кажется, что для этого мне нужно создавать новый объект радиального градиента каждый раз, когда я получаю событие перемещения мыши, потому что центр градиента должен быть установлен в положение мыши. Или я могу использовать какое-то преобразование, чтобы сместить существующий градиент, чтобы, если он заполняет мой круг в правильном положении?

Другими словами, стоит ли каждый раз создавать новый объект градиента? У кого-нибудь есть опыт с этим?

Answer 1

У меня нет опыта с этим, но я уверен, что рисование нового градиента для каждого движения мыши стоит дорого. Вместо этого вы можете попытаться перевести или преобразовать весь контекст холста для достижения своей цели. См. Ссылку ниже для более подробной информации о том, как сделать перевод контекста.

http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/