icon/54x60/design_animation/02 Created with Sketch. icon/90x90/design_animation/06 Created with Sketch. icon/90x90/design_animation/05 Created with Sketch. icon/54x60/design_animation/01 Created with Sketch. icon/54x60/design_animation/03 Created with Sketch. icon/90x90/design_animation/02 Created with Sketch. icon/90x90/design_animation/01 Created with Sketch. icon/90x90/design_animation/03 Created with Sketch. icon/90x90/design_animation/04 Created with Sketch. icon/90x90/design_animation/08 Created with Sketch. lab/lab-rostov-digital icon/90x90/design_animation/07 Created with Sketch.
Вращение в canvas

В 2D-контексте canvas есть функция rotate, работа которой ставит в тупик многих, кто пытается ей воспользоваться. Объекты, отрисованные после вызова этой функции, поворачиваются на указанный в ней угол. Однако есть одна сложность: вращение выполняется не относительно центра объекта, как в CSS, а относительно начала координат всего холста.

То есть, если отрисовать прямоугольник в центре холста, то опорной точкой вращения будет верхний левый угол всего canvas-а.

Чтобы выполнить вращение вокруг нужной точки, нужно сместить к ней начало координат с помощью функции translate и разместить новый объект с соответствующим сдвигом:

context.translate(originX, originY);
context.rotate(angle);
context.fillRect(x - originX, y - originY, width, height);

Пример с вращением прямоугольника относительно его центра:
codepen.io/OlegChulakovStudio/pen/NMxMzv

Сделано в Лаборатории Студии Чулакова

Студия Олега Чулакова

Дизайн-студия № 1 в России по версии Tagline, лучший usability / UX в стране по версии Золотого Сайта.

Специализируется на создании сложных систем и сервисов для крупных компаний. Среди клиентов Студии Tele2, ИКЕА, МегаФон, БКС Банк, Yota и другие крупнейшие российские бренды.