Если элемент <video> – это образцовый представитель HTML5, то <canvas> – это уж точно бунтарь. Элемент <canvas> является (до сих пор) частью HTML5-спецификации, но API для 2D-рисования было выведено в отдельный документ (на случай, если вы ищете его и не можете найти).

Элемент <canvas> обладает массой возможностей, такими как:

• рисование фигур,
• заливка цветами,
• создание градиентов и заливок,
• отображение текста,
• копирование изображений, видеокадров и других холстов,
• манипулирование пикселями,
• экспортирование содержимого <canvas> в статический файл.

Вообще, canvas API настолько интересен, что я не удивлюсь, если ему посвятят целые книги (нет, я не планирую написать такую книгу!).

При работе с <canvas> важно относиться к нему, как к настоящему холсту для рисования. Скажем, вы наносите полоску красной краски на настоящий холст. Если вы нанесете поверх нее синюю краску, то уже не сможете вернуться к первоначальному красному цвету. То же самое с элементом <canvas>. Концепции слоев здесь нет. Элемент <canvas> – это API растрового рисования и, если вы уже выбрали какой-то набор пикселей, то пути назад нет.

Четыре браузера из Большой Пятерки поддерживают <canvas>. Конечно же, нам не хватает IE8, но есть надежда: IE9 поддерживает <canvas>. Фактически, он поддерживает аппаратное ускорение при отрисовке на <canvas> – чего пока не могут другие браузеры. Это делает IE9 preview 3 самым быстрым (с точки зрения <canvas>) парнем на районе.

Всегда рассматривайте варианты

Прежде чем мы углубимся в canvas API, я бы хотел напомнить, чтоб вы всегда убеждались, что используете правильную технологию для работы.

SVG – это альтернативный API рисования. Он основан на векторах и поддерживает слои. SVG также присутствует в DOM, делая возможным легко добавлять обработчики событий для интерактивности и легче работать с обнаружением столкновений (в играх, например). Он также поддерживает анимацию с помощью SMIL или JavaScript. Существует отличная JavaScript-библиотека под названием Raphaël, которая использует SVG для отображения картинок и анимации.

Элемент <canvas> хорошо подходит для манипуляции пикселями и высокоактивной анимации. Брэд Ньюберг (Brad Neuberg) действительно хорошо объяснил отличия в своей речи для Google IO еще в 2009.

Теперь, помня обо всем этом, давайте продолжим с canvas API.

Привет, canvas

Элемент <canvas> представляет собой невидимый блок, по умолчанию размером 300х150 пикселей (во всех браузерах):

<canvas id="c"></canvas>

Итак, перед нами пустой холст. Для того, чтоб рисовать, нам необходим контекст для рисования, который мы можем получить с помощью JavaScript. Как только у нас появился контекст, мы можем пририсовать всякие гадости к нашему любимому контенту:

<script>
// указывайте две переменные сразу через запятую
var canvas = document.getElementById("c"),
    context = canvas.getContext("2d");
// теперь вы можете рисовать
</script>

Фрагмент кода

Контекст – это наш прямой доступ к рисованию на холсте. Без него нам не удастся ничего изобразить.

Рисование фигур

API 2D рисования довольно большой (не слишком огромный, но больше, чем другие API на основе HTML), так что я покажу вам, как рисовать что-то простое: синий прямоугольник и розовый полукруг.

Используя объект context, описанный выше, мы вызываем fillRect ( ), передавая методу координаты верхнего левого угла (x, y), а также ширину и высоту прямоугольника, который мы хотим нарисовать:

<script>
var canvas = document.getElementById("c"),
    context = canvas.getContext("2d");
// x = 10, y = 20, ширина = 200, высота = 100
context.fillRect (10, 20, 200, 100);
</script>

Фрагмент кода

Простой закрашенный прямоугольник, созданный с помощью canvas

Если вы не указываете цвет, заливка и граница по умолчанию будут черного цвета. Так что давайте изменим его на синий, задав fillStyle перед тем, как вызвать fillRect ( ). Мы выбираем цвет перед началом рисования, потому что этот <canvas> в точности как настоящий холст – если вы собираетесь рисовать, вам нужно прежде всего окунуть кисть в краску:

var canvas = document.getElementById("c"),
    context = canvas.getContext("2d");
context.fillStyle = 'blue';
context.fillRect (10, 20, 200, 100);

Фрагмент кода

Синий прямоугольник, созданный с помощью canvas

Такие зоркие HTML5-нинзя как вы, заметили, что я использовал строку blue в качестве цвета заливки. Вы можете использовать любые CSS-свойства цвета в canvas API. Это значит, что blue, #0000ff, #00f, rgb (0, 0, 255) и даже rgba (0, 0, 255, 0.5) – это все валидные цвета.

А что если мы включим эту штуку на полную мощность? Давайте добавим розовый полукруг. О да! Давайте сделаем это!

var canvas = document.getElementById("c"),
    context = canvas.getContext("2d");
context.fillStyle = 'blue';
context.fillRect (10, 20, 200, 100);
// задаем стиль линии
context.strokeStyle = '#fa00ff';
context.lineWidth = 5;
context.lineCap = 'round';
// рисуем дугу
// (я расскажу про эти значения очень скоро - потерпите минутку!)
context.arc(50, 50, 20, 0, Math.PI, false);
// закрашиваем линию
context.stroke();

Фрагмент кода

Синий прямоугольник с полукругом, созданный с помощью canvas

Мы добавили три вещи к нашему JavaScript:

1. Выбор стиля линии
2. Рисование пути полукруга
3. Обводка пути (т. е. рисование линии)

До тех пор, пока вы не добавите fill или stroke, на холсте ничего не появится. В нашем случае это дуга 180 градусов. Метода arc( ) принимает следующие аргументы: координату х, координату y, радиус, начальный угол, конечный угол и, должна ли дуга быть нарисована против часовой стрелки. Все эти аргументы обязательны. (Технически, если вы рисуете круг, не важно, как вы это делаете – по часовой стрелке или против, вам все равно нужно указать этот аргумент.)

Хитрость заключается в начальном и конечном углах. Они оба задаются в радианах. Помните такие? Я не вспомнил, так что ничего страшного, если вы тоже! Вот, как можно преобразить градусы в радианы:

var radians = degrees * Math.PI / 180;

Общепринято использовать 360 градусов в методах рисования, что просто является Math.PI * 2. Точно так же 180 градусов – это Math.PI, который мы использовали для создания нашего полукруга.

Когда вы создали линию, вам необходимо задать для нее обводку (stroke) или залить (fill). Это задает стиль и цвет линии и завершает наш рисунок. Пожалуйста, не забывайте, что: а) вы не можете восстановить утерянные синие пиксели под розовым полукругом, и б) этот пример был бы намного проще в SVG!

Так что выбирайте элемент <canvas> только для того, что ему под силу, как я уже говорил в начале этой статьи.

Экспортирование и сохранение

Чего не может SVG, так это сохранять полученное изображение. Для <canvas> это легко, потому что этот элемент в первую очередь является растром! Элемент <canvas> может экспортировать свое изображение в data: URL (например, data: image/png;base64, iVBORw0KGg…). Затем эти данные могут быть отображены в браузере, где есть возможность сохранить их или перетащить на рабочий стол, использовать в новом <canvas> и так далее.

Браузер должен поддерживать изображения PNG, а также GIF и JPG. В нашем примере это PNG, так как он поддерживает альфа-прозрачность, то есть то место на холсте, на котором мы ничего не нарисовали, будет прозрачным.

Чтоб data: URL, мы просто вызываем canvas.toDataURL (‘image/png’ ). Заметьте, что мы вызываем toDataURL ( ) в элементе <canvas>, а не в 2D-контексте. Причиной этому является то, что мы получаем все пиксели <canvas>, а не только пиксели определенного контекста.

Итак, используя пример, который мы уже создали, мы можем перенаправить пользователя на PNG-версию изображения, когда пользователь нажимает на элемент <canvas> (надуманный пример, я в курсе!):

canvas.onclick = function () {
  
};

Фрагмент кода

Если вы нажмете на элемент <canvas> на живом примере, загрузится его PNG-версия. Теперь вы можете сохранить ее на рабочем столе, отправить по почте друзьям или даже разместить в Твиттере!

Это только начало

Это только малая доля того, что может canvas 2D API. У него еще целая куча возможностей:

• Градиенты, заливки и паттерны
• Пути
• Тексты
• Манипуляция пикселями
• Анимация (в стиле старого доброго рисования в блокноте)

И не переживайте, на сайте HTML5 Doctor будет опубликовано еще много статей, рассказывающих про canvas API. У нас даже есть специально приглашенный гость Таб Аткинс (Tab Atkins) , который может объяснить, как у него получилось отобразить видео полностью на ASCII!

Тем временем, предлагаем ознакомиться с несколькими полезными ресурсами.

Источник:  css-live.ru