В этой статье разберём добавление изображения на canvas и как работать с этим.
Также перед этой статьёй прочтите предыдущие статьи по этой теме.
- Canvas HTML. Основы создания фигур на javascript;
- Canvas анимация на JavaScript, простыми словами и без воды;
- Как работать с текстом в Canvas;
Работа с изображением:
Для начала разберём в canvas как добавить картинку, тут нужно знать одну функцию, drawImage(), но перед этим ещё необходимо создать объект изображения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // Получение элемента canvas let canvas = document.getElementById("canvas"); // Назначение элементу canvas тип для 2D рисования let ctx = canvas.getContext('2d'); // Создание объекта картинки let img = new Image(); // Назначение путь до картинки img.src = "football_PNG52789.png"; // Отслеживание события загрузки страницы window.addEventListener('load', function() { // Вывод картинки ctx.drawImage(img, 0, 0); }); |
В начале, мы как всегда берём canvas элемент и назначаем его для 2D рисования, потом создаём объект изображения и добавляем ему путь до картинки с помощью свойства src.
Дальше, самое интересное: мы добавляем событие загрузки всей странице, это нужно чтобы перед выводом успелo прогрузится изображение, уже внутри его, с помощью drawImage() выводим. Функция принимает три параметра: первый — это сама картинка, второе — координата по оси X, третий — по оси Y, вот результат.
Как видите, у нас тут только часть картинки, это потому, что она очень большая, чтобы это исправить, зададим ей размер.
1 | ctx.drawImage(img, 0, 0, 400, 400); |
Параметры размера задаются сразу после координат, первое — это ширина, второе — высота, вот результат.
Как видите картинка попала чётко в наш canvas элемент.
Ещё вы можете в canvas растянуть изображение, для этого параметр ширины должен быть больше высоты, как то так.
1 | ctx.drawImage(img, 0, 0, 200, 400); |
Ещё есть возможность резать картинку, для этого используется эта же функция, что и для вывода, но параметры уже другие.
1 | ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); |
Разберём каждый параметр.
- image — Элемент картинки;
- sx — Координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника;
- sy — Координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника;
- sWidth — Ширина фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник;
- sHeight — Высота фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник;
- dx — Координата по оси Х, обозначающая стартовую точку холста-приемника;
- dy — Координата по оси Y, обозначающая стартовую точку холста-приемника;
- dWidth — Ширина изображения, полученного из исходной картинки;
- dHeight — Высота изображения, полученного из исходной картинки;
Теперь перейдём к небольшому примеру.
1 2 3 4 5 6 7 8 9 10 | // Создаём объект картинки let img = new Image(); // Путь до картинки img.src = "cat-1046544_1920.jpg"; // Отслеживаем событие загрузки страницы window.addEventListener('load', function() { // Вырезаем картинку ctx.drawImage(img, 400, 100, 1000, 850, 0, 0, 400, 300); }); |
Вот результат:
Слева — то что было изначально, справа — изменена на Canvas версия.
Вывод:
В этой статье вы прочитали как происходит добавление изображения на canvas и в целом работу с изображениями.
Подписываетесь на соц-сети:
Оценка:
Загрузка...