Вращение изображения на 90° в HTML5 Canvas: jQuery и canvas
Быстрый ответ
Для вращения изображения на холсте примените следующие шаги:
// 'ctx' – это контекст 2D холста, 'img' – изображение, 'angle' – требуемый угол вращения в градусах. Операции проводятся от точки с координатами (x, y).
ctx.save(); // Сохраняем текущее состояние контекста
ctx.translate(x + img.width / 2, y + img.height / 2); // Переходим в центр изображения
ctx.rotate(angle * Math.PI / 180); // Поворачиваем изображение на заданный угол, приведенный к радианам
ctx.drawImage(img, -img.width / 2, -img.height / 2); // Рисуем изображение
ctx.restore(); // Возвращаем настройки контекста в исходное состояние
Обеспечение анимированного вращения изображения
Для анимированного вращения изображения с использованием кнопок выполните следующие действия:
let angle = 0; // Устанавливаем начальный угол
const img = new Image();
img.onload = function() { drawRotated(angle); }; // Отображаем изображение после его загрузки
img.src = 'image.jpg'; // Устанавливаем путь к изображению
// Вращение влево при клике
document.getElementById('rotateLeft').addEventListener('click', function() {
angle -= 45; // Уменьшаем угол на 45 градусов
drawRotated(angle); // Перерисовываем изображение
});
// Вращение вправо при клике
document.getElementById('rotateRight').addEventListener('click', function() {
angle += 45; // Увеличиваем угол на 45 градусов
drawRotated(angle); // Перерисовываем изображение
});
// Функция для реализации вращения изображения
function drawRotated(degrees) {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Очищаем холст
ctx.save(); // Сохраняем текущее состояние холста
ctx.translate(canvas.width / 2, canvas.height / 2); // Перемещаемся в центр холста
ctx.rotate(degrees * Math.PI / 180); // Поворачиваем на заданный угол в радианах
ctx.drawImage(img, -img.width / 2, -img.height / 2); // Воспроизводим изображение
ctx.restore(); // Возвращаем настройки контекста в исходное состояние
}
Отображаем расширенные настройки (для продвинутых)
Для создания сложных вращательных эффектов рассмотрим следующие техники:
Прекращаем шаткие вращения
Для обеспечения плавности вращения в анимации воспользуйтесь requestAnimationFrame
:
function animateRotation() {
angle += 1; // Плавное увеличение угла
drawRotated(angle); // Перекрашивание изображения
requestAnimationFrame(animateRotation); // Циклическая анимация
}
animateRotation(); // Запуск анимации
Управляем размерами холста!
Подстраивайте размер холста под размер изображения для минимизации искажений:
if (angle % 180 !== 0) {
canvas.width = img.height;
canvas.height = img.width;
} else {
canvas.width = img.width;
canvas.height = img.height;
}
drawRotated(angle);
Экспериментируем с перспективой
Используйте функцию setTransform
для создания эффекта искажения при вращении:
ctx.save();
ctx.setTransform(cos, sin, -sin, cos, x, y); // Применяем сложную трансформацию
ctx.drawImage(img, -img.width / 2, -img.height / 2); // Отображаем изображение
ctx.restore();
Визуализация
Представьте, что холст HTML5 – это ваша танцплощадка, а вращение изображения – это танцовщик:
Холст (🕒): Готов к действию!
Изображение (🕐): Принимает начальную позицию в 1:00
Вращение на 90 градусов соответствует перемещению в положение 3:00:
context.rotate((Math.PI / 2)); // Вращаем на 90 градусов
Визуализация изменений:
До вращения: 🕒🕐
После вращения: 🕒🕑
После вращения изображение "смотрит" вправо, как стрелка часов, указывающая на 3:00. Так разрешается возможность холста менять ориентацию изображения.
Сцены за кулисами
В процессе работы часто возникают непредвиденные ситуации и зависания.
Удостоверимся в загрузке изображения
Дождитесь полной загрузки изображения прежде, чем начинать его вращение:
img.onload = function() {
drawRotated(angle);
};
Подгоняем холст под размеры изображения
Скорректируйте размеры холста под размеры изображения для оптимального видения:
canvas.width = img.width;
canvas.height = img.height;
Контролируем углы вращения
Ограничьте угол вращения в диапазоне от 0 до 360 градусов для предотвращения ошибок:
angle = angle % 360;
Готовимся к выступлению
Пользуйтесь функцией drawRotated
для централизации логики вращения:
function drawRotated(angle) { ... } // Начинаем танец!
Полезные материалы
- CanvasRenderingContext2D: метод rotate() – Веб-API | MDN — подробное описание метода
rotate()
на MDN. - Метод rotate() холста HTML — практический пример и обзор функции
rotate()
на W3Schools. - Актуальные вопросы 'canvas+rotation+image' – Stack Overflow — обсуждения и решения проблем, связанных с вращением изображений на холсте на Stack Overflow.
- Преобразования – Веб-API | MDN — информация о вращении объектов с помощью матрицы преобразований.
- Мгновение и... — пример вращения изображения на холсте HTML5 на CodePen.