Подключение библиотеки ничем не отличается от подключения обычного JavaScript файла (строка 1). А функцию рассмотрим подробнее. Сначала создаем холст (строка 4). В параметрах конструктора указаны: 1) id блока который будет контейнером для изображения; 2) длина блока (в пикселах); 3) высота блока (в пискелах). После этого мы получаем имя файла картинки (строка 5). Затем, с помощью функции image создаем изображение. В ее параметрах мы указываем название файла, x, y (координаты левого верхнего угла), width, height (длина, ширина). На данном этапе наше изображение полностью идентично оригиналу. С помощью функции matrix мы создаем отражение и смещаем его вниз. Тут нужны некоторые пояснения. Параметры этой функции – это коэффициенты матрицы аффинных преобразований (а11, а12, а21, а22, dx, dy). Подробно рассказать об этих преобразованиях в рамках статьи я, конечно, не смогу, поэтому поясню только общий принцип. Такие матрицы преобразований позволяют описать изменения объекта вроде сдвига, поворота, масштабирования, растяжения, сжатия и перемещения. Если у вас есть такая матрица, то вы просто умножаете координаты точек на нее и получаете координаты точек трансформированного объекта. Результат выполнения функции показан на скриншоте. Сверху находится оригинальное изображение, под ним – отражение. Естественно, возможности библиотеки этим не ограничиваются. На официальном сайте показаны гораздо более эффектные примеры (этот и этот). Пример с отражением вы можете скачать в виде архива. До встречи!
Понравилась статья? Получай обновления и будь всегда в курсе событий!