Canvas работа с изображнием

добавление изображения на canvas
Метки: / /

В этой статье разберём добавление изображения на canvas и как работать с этим.

Также перед этой статьёй прочтите предыдущие статьи по этой теме.

  1. Canvas HTML. Основы создания фигур на javascript;
  2. Canvas анимация на JavaScript, простыми словами и без воды;
  3. Как работать с текстом в Canvas;

Работа с изображением:

Для начала разберём в canvas как добавить картинку, тут нужно знать одну функцию, drawImage(), но перед этим ещё необходимо создать объект изображения.

В начале, мы как всегда берём canvas элемент и назначаем его для 2D рисования, потом создаём объект изображения и добавляем ему путь до картинки с помощью свойства src.

Дальше, самое интересное: мы добавляем событие загрузки всей странице, это нужно чтобы перед выводом успелo прогрузится изображение, уже внутри его, с помощью drawImage() выводим. Функция принимает три параметра: первый — это сама картинка, второе — координата по оси X, третий — по оси Y, вот результат.

canvas как добавить картинку

Как видите, у нас тут только часть картинки, это потому, что она очень большая, чтобы это исправить, зададим ей размер.

Параметры размера задаются сразу после координат, первое — это ширина, второе — высота, вот результат.

Разvер картинки в canvas

Как видите картинка попала чётко в наш canvas элемент.

Ещё вы можете в canvas растянуть изображение, для этого параметр ширины должен быть больше высоты, как то так.

Ещё есть возможность резать картинку, для этого используется эта же функция, что и для вывода, но параметры уже другие.

Разберём каждый параметр.

  1. image — Элемент картинки;
  2. sx — Координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника;
  3. sy — Координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника;
  4. sWidth — Ширина фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник;
  5. sHeight — Высота фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник;
  6. dx — Координата по оси Х, обозначающая стартовую точку холста-приемника;
  7. dy — Координата по оси Y, обозначающая стартовую точку холста-приемника;
  8. dWidth — Ширина изображения, полученного из исходной картинки;
  9. dHeight — Высота изображения, полученного из исходной картинки;

Теперь перейдём к небольшому примеру.

Вот результат:

вырез изображения на canvas

Слева — то что было изначально, справа — изменена на Canvas версия.

Вывод:

В этой статье вы прочитали как происходит добавление изображения на canvas и в целом работу с изображениями.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: