Как работает в html5 canvas? Примеры рисования кодом

Сегодня я вам расскажу, как работает в html5 canvas? И примеры приведу, хотя бы парочку. Canvas это тег, в котором с помощью javascript можно рисовать различные фигуры. Это одно из нововведений html5 и я вам о нем сейчас немного расскажу.

Подготовка к рисованию

Чтобы начать творить, необходимо создать сам холст, а также связать с ним скрипт.

<canvas width = "400" height = "300" id = "field"></canvas>

Указываем холсту размеры, а также идентификатор. Он нужен для того, чтобы связать холст со скриптом, что мы сейчас и сделаем:

<script>
        var field = document.getElementById('field').getContext('2d');
</script>

Запишем в переменную field эту строчку, она позволит рисовать внутри холста с помощью различных методов. Итак, теперь мы можем переходить к попыткам рисования. Для удобства я сделаю фон холста желтым, а не белым, чтобы четко было видно все отступы.

Пример 1 — прямоугольник без заливки

Теперь у нас есть переменная field и обращаясь к различным методам можно рисовать внутри контейнера canvas. В первую очередь можно отрегулировать толщину линии, а также ее цвет, это делается с помощью следующих строк:
field.lineWidth = 4;
field.strokeStyle = '#173045';

Отлично, параметры заданы. Теперь нам важно понять, как вообще происходит рисование. Происходит оно по такому принципу: есть координата х, оно начинается в начале холста и движется вправо, а также есть координата y, она также начинается вначале контейнера, но идет вниз. Чтобы вы это осознали лучше, смотрите эту картинку:

И как же происходит рисование прямоугольника? Сначала всегда задается смещение по координате x, а после по у. После задание этого начального положения нужно всего лишь указать ширину и высоту прямоугольника. Сначала ширину, а потом — высоту. Смотрим:
field.strokeRect(80, 90, 120, 70);
Результат:

Здесь первый параметр в скобках это смещение по x, второй — смещение по у, третий — ширина, четвертый — высота. Все, это достаточно запомнить, чтобы рисовать прямоугольники.

Пример 2 — прямоугольник с заливкой

Делается в этом случае все таким же образом, изменяется только название метода:
field.fillStyle = '#173045';
field.fillRect(50, 50, 130, 85);

Метод fillStyle позволяет определить цвет заливки. Я пока удалил прошлый наш прямоугольник, новый выглядит так:

Как видите, все 4 параметра задаются в той же последовательности. Если обнулить первые два значения, то прямоугольник будет нарисован в верхнем левом углу холста.

Пример 3 — линия и сложные фигуры

Как вы понимаете, описанные выше методы не годятся для создания сложных фигур. Давайте нарисуем на canvas треугольник. Это не так сложно, как могло бы показаться на первый взгляд.
Метод beginPath() нужен для того, чтобы показать начало рисования произвольной фигуры. Метод moveTo() устанавливает начальную координату для рисования. Как вы понимаете, у него два параметра — координаты по x и y. Значит, чтобы подготовиться к рисованию сложной фигуры нужны такие строчки кода:
field.beginPath();
field.moveTo(30, 30);

Для примера я начну рисовать треугольник из точки в 30 пикселях справа и снизу от левого верхнего угла холста. Рисование происходит с помощью линий, метод lineTo():
field.beginPath();
field.moveTo(30, 30);
field.lineTo(150, 100);
field.lineTo(250, 30);
field.closePath();
field.lineWidth = 3;
field.strokeStyle = 'silver'
field.stroke();

Тут я нагородил много кода, но сейчас все объясню, пока смотрите на результат:

Как видим, вполне себе треугольник. Мы прочертили из нашей начальной точки линию в конечную точку, которая находиться в указанных координатах: 150 пикселей от начала холста по оси x, и 100 — от начала по у. Все координаты указывается относительно верхнего левого края холста, а не того места, где закончилась линия. Запомните это, потому что это сразу упрощает понимание и вы уже в голове сможете представить себе результат.

Собственно, метод closePath() завершает рисование фигуры, его указываем после последней нарисованной линии. Остальные параметры:
lineWidth = 3; — толщина линии 3 пикселя;
strokeStyle = 'silver'; — цвет линии серебряный;
stroke(); — ВНИМАНИЕ! Без этого метода в конце наши линии не отобразятся и треугольник не будет виден. Поэтому прописываем его обязательно.

Что ж, на этом пока все примеры. Надеюсь, они помогли вам познакомиться с основами рисования в html5. По любым вопросам пишите в комментарии.