Как мы все знаем, холст — это растровое изображение, и вы можете визуализировать в нем все, что хотите, но редактировать его можно, только манипулируя свойствами холста. То есть вы не можете манипулировать вещами, нарисованными на холсте. Например, если я добавляю картину на холст и теперь хочу переместить ее на 10 пикселей, мы не сможем напрямую манипулировать картиной, потому что мы вообще не сможем получить картину. .любая информация. Все, что мы когда-либо сможем получить, это объект Canvas.
Итак, возникает вопрос: как повернуть изображение?Фактически, холст предоставляет различные интерфейсы для управления холстом. Для вращения существует метод Rotate().
На самом деле вращение здесь на самом деле не вращает холст. Например, мой ctx.rotate(Math.PI/2) поворачивается на 90°. Это не значит, что мы увидим на странице холст, повернутый на 90°. Мы можем понять, что холст на самом деле состоит из двух частей: одна — холст, видимый невооруженным глазом, а другая — виртуальный холст, используемый для операций. Все наши действия на виртуальном холсте будут сопоставлены с реальным холстом.
Это может быть сложно понять, поэтому давайте воспользуемся картинкой, чтобы объяснить это. Во-первых, давайте представим метод Rotate(). Он может вращать холст и вращать начало координат холста по умолчанию.
Давайте посмотрим на эффект поворота на 45°:
Здесь мы видим, что виртуальный холст, о котором я только что упомянул, поворачивается на 45°, а затем в виртуальный холст вставляется изображение. Тогда реальный холст представляет собой пересечение виртуального холста и реального холста. Это может быть непросто понять, пожалуйста, подумайте об этом внимательно.
Код для двух картинок следующий:
// Не повернутый var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.drawImage(img, 0, 0)// Поворот против часовой стрелки на 45° var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.rotate(-Math.PI / 4);ctx.drawImage(img, 0, 0)Учитывая это, я думаю, что все в принципе знают, как использовать Rotate().
Поговорим о том, как повернуть центр изображения.
Позвольте мне рассказать о том, как использовать два других метода холста:
ctx.translate(x, y): этот метод позволяет перемещать начало координат холста. Параметры: x и y;
ctx.drawImage(img, x, y): этот метод использовался выше, но у него есть три параметра. Первый — это размер вставляемого изображения, а следующие два — x и y — параметры для img. вставка изображения. Местоположение изменено.
Как видно из рисунка, если вы хотите повернуть на 45° вокруг центра изображения, вам придется переместить начало координат холста в центр изображения, затем повернуть холст, а затем при вставке изображения переведите картинку в левый верхний угол на половину самой картинки.
Здесь есть три шага:
Давайте рассмотрим эти три шага по отдельности (ширина и высота картинки 400 и 300)
Переместить начало координат холста
var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.translate(200, 150)ctx.drawImage(img, 0, 0)Поворот холста
var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, 0, 0)Вставить картинку и переместить
var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, -200, -150)Вот и все, ты закончил
ps: После выполнения ряда действий каждый должен повернуть начало координат холста, чтобы восстановить его. В противном случае после ряда операций настройки холста будут сбиты. Просто восстанавливайте настройки в исходное состояние после каждой операции.
var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.translate(200, 150) // 1ctx.rotate(-Math.PI / 4) // 2ctx.drawImage(img, -200, -150)// Восстановите настройки (шаги восстановления следует поменять на измененные вами шаги) ctx.rotate(Math.PI / 4) // 1ctx.translate(-200, -150) // 2// После этого начало координат холст возвращается в левый верхний угол. Угол поворота равен 0 //Другие операции...Еще одна вещь, которую следует отметить: то, что я только что продемонстрировал, является примером, в котором оси X и Y изображения относительно холста равны 0. Если это не 0, просто переместите начало координат ctx.translate(200+x, 150 +у). 200 и 150 здесь — это половина ширины и высоты изображения, а x и y — это x и y изображения относительно холста.
В этой статье рассказывается только о вращении по центру изображения. Позже я напишу о вращении и масштабировании изображения. Если что-то написано плохо или неправильно, пожалуйста, укажите на это.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.