Введение в HTML5 Canvas

Интернет сообщество все больше и больше говорит о Web 2.0 технологиях, которые призваны избавить пользователя от ненужных надстроек и дополнительных программ вроде Adobe Flash. Одно из самых ожидаемых нововведений в HTML5 – технология создания растровых изображений с использованием языка программирования Javascript. Именно она призвана заменить Flash в сфере создания браузерных игр, анимации и построения графиков. В этой статье мы рассмотрим базовые понятия этой технологии и научимся ей пользоваться. Для этого нам понадобятся базовые знания Javascript и HTML, а также один из современных браузеров (Google Chrome 3+, Firefox 3.5+, Opera 10+, Safari 3+ IE 9+).
Итак, начнем. База для создания растрового изображения на нашей странице – тег <canvas> («canvas» в переводе с английского – «холст»). Следующий HTML-код создаст на странице холст размером 800×400 пикселей, с которым мы и будем дальше работать:

<canvas id='canvas' width=800 height=400>
<p>Ваш браузер не поддерживает HTML5 Canvas!</p>
</canvas>

Тег <canvas> парный. Это сделано для того, чтобы дать возможность вывести сообщение вместо холста в тех случаях, когда браузер не поддерживает эту HTML5 технологию. Сохранив файл с исходным кодом и открыв его в браузере вы обнаружите, что на странице ровным счетом ничего нет. Не пугайтесь, так должно быть! Дело в том, что сам тег всего лишь создает прозрачное изображение. Рисовать на нашем холсте мы будем с помощью Javascript.
Добавим на страницу скрипт следующего содержания:

<script>
var canvas = document.getElementById («canvas»);
var ctx = canvas.getContext ('2d');
ctx.fillRect (0, 0, 100, 100);
</script>

Сохранив страницу и запустив ее в браузере мы увидим черный квадрат:

Теперь рассмотрим подробнее, что же мы наделали Строка var canvas = document.getElementById («canvas») идентифицирует переменную canvas как холст, а var ctx = canvas.getContext ('2d') заставляет переменную ctx ссылаться на двумерный контекст холста. Это означает, что теперь с ее помощью мы сможем рисовать на холсте двумерное изображение. «А как насчет 3d?» — спросите вы. Дело в том, что стандарт HTML5 находится в разработке и 3d контекст для canvas планируется, но пока не готов. Однако разработчики браузеров предлагают различные его вариации (например, WebGL от Mozilla). Перейдем наконец к функции, которая собственно и нарисовала наш квадрат: первые два параметра функции fillRect это координаты x и y точки, с которой мы начинаем рисовать, а вторые два — ширина и высота прямоугольника, который мы хотим нарисовать. Стоит напомнить, что начало координатной плоскости в Javascript находится в левом верхнем углу и оси Ox и Oy направлены, соответственно, вправо и вниз. Аналогичным образом мы может нарисовать и контур прямоугольника, не закрашивая его. Это умеет функция strokeRect (). Добавим ее в наш скрипт:

ctx.strokeRect (0, 101, 100, 100);

Мы увидим, что ниже нашего первого квадрата появился второй:

Аргументы функции strokeRect аналогичны таковым у fillRect. Все остальные элементы в технологии canvas рисуются аналогично этим двум. Примитивно? Не правда! Надеюсь дальше вас в этом переубедить. Рисовать черные квадраты скучно. Давайте выберем цвет повеселее:

ctx.fillStyle = «red»;

И нарисуем еще один квадрат:

ctx.fillRect (0, 202, 100, 100);

Мы увидим, что к нашим квадратам добавился еще один, на этот раз красный. Не вижу смысла тут что-то объяснять. Стоит только сказать, что цвет можно указывать как названием, так и в шестнадцатеричном или RGB коде. Аналогично указывается цвет для ctx.strokeRect.
Для функции strokeRect можно также указать ширину линии:

ctx.lineWidth = 10;
ctx.strokeRect (0, 0, 100, 100);

Выглядит это так:

Еще один из базовых принципов canvas – рисование по частям. Это значит, что мы можем рисовать фигуру по частям. Рассмотрим следующий код:

ctx.strokeStyle = «green»;
ctx.lineWidth = 20;
ctx.beginPath ();
ctx.moveTo (20,20);
ctx.lineTo (20,120);
ctx.lineTo (120,20);
ctx.lineTo (10,20);
ctx.stroke ();

На холсте мы увидим зеленый треугольник:

С первыми двумя функциями мы уже знакомы. Далее следует функция ctx.beginPath, которая говорит интерпретатору, что мы начинаем рисование по частям. С помощью ctx.moveTo мы переходим в точку с координатами (20, 20), с которой и начинаем рисовать, а ctx.lineTo проводит линию в указанную точку. Вместо ctx.stroke мы могли использовать ctx.fill и получили бы закрашенный треугольник. И здесь все просто.
Иногда нужно стереть что-то, что уже нарисовано, либо его фрагмент. Для этого также существует особая функция – clearRect. Как вы уже могли догадаться по названию, она позволяет стереть прямоугольник и работает аналогично функциям fillRect и strokeRect:

ctx.strokeStyle = «green»;
ctx.lineWidth = 20;
ctx.beginPath ();
ctx.moveTo (20,20);
ctx.lineTo (20,120);
ctx.lineTo (120,20);
ctx.lineTo (10,20);
ctx.stroke ();
ctx.clearRect (0, 0, 50, 50);

С рисованием фигурок покончено! Давайте разберемся, как выводить текст на наш холст. Вы можете установить три атрибута для вашего текста: font, textAlign и textBaseline. font позволяет устанавливать тип, размер и цвет шрифта, textAlign – выравнивание текста, а textBaseline устанавливает, где рисуется текст относительно начальной точки. Давайте попробуем что-нибудь написать на нашем холсте:

ctx.font = «bold 20px sans-serif»;
ctx.fillText («Hello world!», 30, 30);

Функция fillText принимает в качестве параметров строку, которую мы хотим вывести, и координаты точки, в которой мы выводим текст. Опять же, аналогично filleText можно использовать и функцию strokeText, которая будет выводить нам контуры букв.
Последнее, о чем я бы хотел рассказать – вывод изображений на холст. Ведь не будем же мы, разрабатывая, например, игру, рисовать ее треугольниками да квадратами! Для начала создадим объект-изображение и скажем ему, откуда брать картинку:

var img = new Image ();
img.src = «tux.png»;
Функция, которая выводит изображение, называется drawImage. Она может принимать три, пять, или девять аргументов:
drawImage (img, x, y) – изображение и координаты, куда рисовать картинку
drawImage (img, x, y, iw, ih) – к предыдущим добавляются еще размеры изображения
drawImage (img, ix,iy, iw, ih, x, y) – выводит часть изображения (начиная от точки (ix, iy) изображения шириной iw и высотой ih в точке (x, y) холста)
Посмотрим, как это работает на практике:
var img = new Image ();
img.src = «tux.png»;
drawImage (img, 0,0);

На этом наш мини-курс закончен. Мы рассмотрели базовые понятия HTML5 Canvas, однако за бортом остались многие ее возможности. Изучив их самостоятельно с помощью базы, которую вам дала эта статья, вы сможете полностью окунуться в мир создания современных веб-приложений, требующих от пользователя только современный браузер! Удачи!

Под конец урок с youtube посвященный так же html5 canvas, на english:

Уразаев.

Приглашаю присоединиться ко мне в следующих сервисах: