Вы можете нажать здесь: Демонстрация анимации горизонтального отражения зеркала на холсте
Виден анимационный эффект клика по картинке на демо-странице.
2. Реализация зеркального переворота изображения на Canvas.Добиться эффекта переворачивания элементов в CSS относительно просто. Например, если мы хотим, чтобы определенное изображение переворачивалось по горизонтали, нам понадобится всего одна строка CSS:
img {преобразование: масштабX(-1);}или:
img {преобразование: масштаб (-1, 1);}А вот в холсте немного сложнее. Беда не в том, что его нельзя перевернуть, а в расположении системы координат.
В Canvas следующий код может обеспечить горизонтальное зеркальное отражение ресурсов (при условии, что контекст является 2D-контекстом Canvas):
context.scale(-1, 1);
Или используйте API setTransform для прямого преобразования матрицы:
context.setTransform(-1, 0, 0, 1, 0, 0);
Однако, хотя переворачивание реализовано, существует большая проблема с позиционированием элементов в Canvas. Это связано с тем, что система преобразования координат Canvas отличается от системы CSS. Поэтому, если мы хотим добиться эффекта переворота по центру, нам нужно перед переворотом переместить центральную точку целевого элемента на ось преобразования.
Возьмите расстояние горизонтального переворота, переведите горизонтальное смещение после преобразования смещения перед масштабированием, и тогда вы сможете увидеть эффект постоянного центрирования переворота.
Язык бледный, поэтому давайте сфотографируемся для иллюстрации.
Система координат изменения холста по умолчанию — верхний левый угол.
Следовательно, если горизонтальный масштаб равен 1, 0,5, 0, -0,5, -1, конечное положение будет таким, как показано ниже:
Таким образом, мы можем получить формулу горизонтального расстояния, которое должно быть смещено:
distance = (canvas.width – image.width * scale) / 2;
Таким образом, окончательный код клавиши для зеркального отображения и рисования изображений будет выглядеть следующим образом (при условии, что размер горизонтального масштабирования является масштабом):
//Регулировка привязки координат context.translate((canvas.width - image.width * масштаб) / 2, 0);context.scale(scale, 1);context.drawImage(image, 0, 0);//Привязка координат Восстановить context.setTransform(1, 0, 0, 1, 0, 0);
Как добавить эффект анимации?
Мы можем использовать Tween.js, https://github.com/zhangxinxu/tween.
В нем есть различные алгоритмы плавности. С помощью удобного метода Math.animation() мы легко достигнем желаемого эффекта!
Math.animation(форма, длительность, замедление, обратный вызов);
Анимация JS выглядит следующим образом:
var Canvas = document.querySelector('canvas');var context = Canvas.getContext('2d');//Animation Math.animation(1, -1, 600, 'Quad.easeInOut', function (value, isEnding ) { // Очистка содержимого холста context.clearRect(0, 0, Canvas.width, Canvas.height); // Отрегулируйте координаты context.translate((canvas.width - Canvas.width * value) / 2, 0 // Отрегулируйте масштаб context.scale(value, 1); // Рисуем текущее изображение context.drawImage(eleImg, 0, 0); //Восстановление привязки координат context.setTransform(1, 0, 0, 1, 0, 0);}); 3. ЗаключениеЕще одна холодная статья. Интерфейсных пользователей Canvas не так много, и его аудитория ограничена. Он не так популярен, как популярная технология. Однако, как говорится в старой поговорке, ни одно доброе дело не является слишком малым, чтобы им можно было пренебречь. Я надеюсь, что некоторые друзья смогут оказать помощь, когда они будут искать соответствующие проблемы в будущем.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.