Здравствуйте, уважаемые читатели!
В сегодняшней статья я хотел немного рассказать про работу с изображениями с помощью Canvas Api.
Данная статья является продолжением линейки статей про Canvas. Первая статья здесь: Canvas, основы работы с помощью JavaScript.
Естественно, что в Canvas есть возможность работать с изображениями. Функционал достаточно богат, но мы рассмотрим лишь самые основные возможности. Для более детального изучения всегда можно заглянуть в полную документацию и ознакомиться. По Canvas написано много учебников с хорошими примерами.
Как правило, работая с Canvas мы используем какие-либо библиотеки (я, например, привык использовать konvajs), так как нативный Canvas достаточно громоздкий. Народные умельцы помогли нам и сделали множество удобных библиотек, которые облегчают работу с изображениями и с другими возможностями Canvas.
Приступим!
Основы работы с изображениями
В принципе всю работу с изображениями можно свести к 2-м действиям:
- Загрузка изображения
- Добавление изображения на холст после наступления callback-а загрузки
Приведем простой пример:
var example = document.getElementById('example'),
context = example.getContext('2d'),
img = new Image();
example.height = 300;
img.src = 'http://alexdev.ru/wp-content/themes/alexdev/images/logo.png';
img.onload = function () {
// здесь мы выводим на холст наше изображение
}
Если мы попытаемся вывести изображение где-то до вызова onload у img, то изображение попросту не отобразиться.
Для вывода нашего изображения нам понадобится функция drawImage()
С помощью этой функции мы можем вывести наше изображение на экран (1), изменить размер изображения (2) либо вырезать какую-либо часть изображения (3).
// 1. вывод изображения drawImage(image, x, y) // 2. изменение размера изображения drawImage(image, x, y, width, height) // 3. вырезание изображения и размещение его на холсте drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Сложность может вызвать возможность вырезания изображения. Сложно соотнести, где какие параметры. Изображение ниже хорошо иллюстрирует, какие параметры на что влияют:
Если мы дополним пример выше, то получим следующий несложный пример:
var example = document.getElementById('example'),
context = example.getContext('2d'),
img = new Image();
example.height = 300;
img.src = 'http://alexdev.ru/wp-content/themes/alexdev/images/logo.png';
img.onload = function () {
// 1. вывод изображения
context.drawImage(img, 0, 0);
// 2. изменение размера изображения
context.drawImage(img, 0, 120, 300, 40);
// 3. вырезание изображения и размещение его на холсте
context.drawImage(img, 50, 0, 50, 100, 100, 180, 100, 100);
}
Результат:
Пожалуй, в 90% случаев этих 3-х возможностей будет достаточно 🙂
Немного о спрайтах в Canvas
Sprite — графический объект в компьютерной графике. Чаще всего — растровое изображение, свободно перемещающееся по экрану.
Один из примеров спрайтов, которые я использовал при создании игр:
Если простыми словами, то спрайт — это некоторое изображение, которое, как правило, состоит из кадров анимации. И если мы будем перемещать кадры, то создастся эффект движущейся картинки.
Примером ниже на Canvas можно воспроизвести анимацию героя выше, если в игровом цикле передавать правильные параметры X и Y:
context.drawImage(img, x, y, 50, 50, 0, 0, 50, 50);
Здесь мы вырезаем квадратное изображения в 50 пикселей и рисуем его на экране. При этом квадрат вырезается из указанной точки изображения (X;Y).
Код анимирования спрайтов я тут приводить уже не буду. Примеры были в других статьях по разработки игр на Canvas 🙂
На этом все.
В следующий раз хочу сделать небольшую обзорную статью про Canvas и WebGL.
Жду вас в следующих статьях!
Подписывайтесь на рассылку 😉
Спасибо за внимание!
