Как повернуть изображение на холсте HTML5 вокруг центра - PullRequest
Новая
       10

Как повернуть изображение на холсте HTML5 вокруг центра

0 голосов
/ 02 февраля 2019

Это практически точная копия 20 других вопросов, но я нигде не могу найти правильный ответ.Все, что мне нужно, это способ поворота изображения вокруг его центра.Я пробовал это (используя strokeRect в качестве заполнителя): 

ctx.translate(x, y);
ctx.rotate(-angle);
ctx.strokeRect(x, y, 150, 100);
ctx.rotate(angle);
ctx.translate(-x, -y);

Я попробовал десятки вариантов по этому и посмотрел каждый пост StackOverflow по теме, без функции, которая рисует изображение вращается в своем центре на определенную величину. Это все, что я хочу.

1 Ответ

0 голосов
/ 03 февраля 2019

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

ctx.save();
ctx.translate(x + width/2, y + height/2);
ctx.rotate(-angle);
ctx.translate(-width/2, -height/2);
ctx.strokeRect(0, 0, 150, 100);
ctx.restore();
...