Рисование в JavaScript (canvas)

В HTML5 есть тег canvas, который создаёт поле для рисования. На нём можно рисовать с помощью скриптов JavaScript. Разберём как это работает.

Подготовка поля для рисования

Сначала необходимо на странице прописать тег:

<canvas id="canvas" width="200" height="200"></canvas>

Теперь с помощью JavaScript надо обратиться к этому полю. Сначала получим ссылку на него через getElementById а затем создадим объект, в котором будет находиться так называемый "контекст", через методы которого будем рисовать:

<canvas id="graph" width="200" height="200"></canvas>
<script>
   var canvas = document.getElementById('graph');
   var ctx = canvas.getContext('2d');
</script>

Теперь обращаясь к методам в объекте ctx можно рисовать различные фигуры в пределах области canvas. Попробуем сделать это.

Рисование линий

Самая простая фигура для отрисовки - это линия. Попробуем выполнить следующий код:

ctx.moveTo(50, 100);
ctx.lineTo(150, 100);

В результате получим такую линию:

<canvas id="graph" width="200" height="200"></canvas>
<script>
   var canvas = document.getElementById('graph');
   var ctx = canvas.getContext('2d');

   ctx.beginPath();
   ctx.moveTo(50, 100);
   ctx.lineTo(150, 100);
   ctx.stroke();
</script>

JavaScript внутри canvas рисует точно так же, как человек: ставит карандаш на определённое место листа бумаги и тянет его в любую сторону, чтобы начал появляться рисунок. Разберёмся с последними четырьмя строчками кода.:

Первая команда beginPath говорит о том, что надо приготовиться к рисованию.
Вторая команда moveTo(50, 50) говорит о том, куда JavaScript должен поставить свой карандаш, откуда начнётся рисование. В скобках задаётся горизонтальная и вертикальная координата в пикселях (от левого верхнего края canvas). В нашем случае это точка находится на расстоянии 100 пикселей от верхнего и левого края.
Третья команда lineTo(150, 50) говорит о том, куда JavaScript должен тянуть свой карандаш. В скобках задаётся горизонтальная и вертикальная координата в пикселях. В нашем случае это точка находится на расстоянии 100 пикселей от верхнего края и 150 от левого. То есть получится горизонтальная линия по центру canvas.
Последняя четвёртая команда stroke говорит, что надо закончить рисование.

Получится такой результат:

Линия рисуется непрерывно, пока не выполнена команда stroke. Поэтому можно нарисовать фигуру, используя команду lineTo несколько раз подряд. Давайте сделаем это и нарисуем квадрат:

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50); // линия вправо
ctx.lineTo(150, 150); // линия вниз
ctx.lineTo(50, 150); // линия влево
ctx.closePath(); // смыкание начала и конца рисунка (левая стена)
ctx.stroke();

Чтобы нарисовать квадрат, нужно нарисовать 4 линии. Но в примере кода мы заменили последний метод lineTo на closePath, которая рисует линию, автоматически вычисляя нужные координаты, чтобы сомкнуть её с началом рисунка. Таким образом чтобы нарисовать последнюю (левую) сторону квадрата мы использовали не lineTo(50, 50), а просто closePath().

Чтобы изменить цвет линии, используем метод strokeStyle, которому передадим нужный цвет в обычном CSS формате (название цвета, HEX или RGB форматы). Чтобы изменить толщину линии необходимо использовать метод lineWidth, которому необходимо задать толщину линии в пикселях. Оба этих значениия (цвет и толщина) должны быть заданы до вызова метода stroke (который стоит в последней строчке примера):

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50); // линия вправо
ctx.lineTo(150, 150); // линия вниз
ctx.lineTo(50, 150); // линия влево
ctx.closePath(); // смыкание начала и конца рисунка (левая стена)
ctx.strokeStyle = '#1a2edb'; // тёмно-синий цвет
ctx.lineWidth = 5; // толщина линии в 5px
ctx.stroke();

Получится такой результат:

Заливка рисунка

Попробуем разукрасить полученный квадрат не чёрным цветом, а синим. Для этого надо использовать метод fill. Точно так же как и изменение цвета/толщины линий, этот метод должен быть вызван до вызова метода stroke (который стоит в последней строчке примера).

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50); // линия вправо
ctx.lineTo(150, 150); // линия вниз
ctx.lineTo(50, 150); // линия влево
ctx.closePath(); // смыкание начала и конца рисунка (левая стена)
ctx.fill(); // закрашивание фигуры
ctx.stroke();

Не обязательно, чтобы фигура была закончена и "закрыта". То есть можно не ставить closePath, а нарисовать три стороны и применить закрашивание fill, тогда всё равно закрасится именно нужная область:

Чтобы изменить цвет заливки, используем метод fillStyle, которому передадим нужный цвет в обычном CSS формате (название цвета, HEX или RGB):

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50); // линия вправо
ctx.lineTo(150, 150); // линия вниз
ctx.lineTo(50, 150); // линия влево
ctx.closePath(); // смыкание начала и конца рисунка (левая стена)
ctx.fillStyle = '#1a2edb'; // тёмно-синий цвет
ctx.fill();
ctx.stroke();

Получится такой синий квадрат:

Рисование окружностей

Для рисования окружностей существует метод arc, которому надо передать сразу шесть параметров:

Горизонтальную координату центра окружности на canvas (в пикселях)
Вертикальную координату центра окружности на canvas (в пикселях)
Радиус окружности (в пикселях)
Начальный угол окружности (в радианах!)
Конечный угол окружности (в радианах!)
Рисовать по часовой стрелке или против (если против, то значение "false", а если по часовой то "true"). По умолчанию рисует против часовой

Попробуем нарисовать полную окружность:

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();

Получится такой круг:

Изменять толщину линии можно с помощью известного метода lineWidth, а цвет с помощью strokeStyle. Давайте модифицируем предыдущий пример и попробуем нарисовать полуокружность с синим цветом линии и толщиной 5 пикселей:

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI);
ctx.strokeStyle = '#1a2edb'; // тёмно-синий цвет
ctx.lineWidth = 5; // толщина линии в 5px
ctx.stroke();

Получится такой синий полукруг:

Заливать круги можно с помощью известного метода fill, а задание цвета делается с помощью уже оговоренного метода fillStyle. Попробуем доработать предыдущий пример и нарисовать верхний полукруг, но залитый зелёным цветом:

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI);
ctx.strokeStyle = '#1a2edb'; // тёмно-синий цвет
ctx.lineWidth = 5; // толщина линии в 5px
ctx.stroke();

ctx.beginPath();
ctx.arc(100, 100, 30, Math.PI, 0);
ctx.fillStyle = '#50c843'; // зелёный цвет
ctx.fill();
ctx.stroke();

Получится два круга. Зелёный (с заливкой) маленький вверху и синий (без заливки) большой снизу:

Обратите внимание, что методы strokeStyle и lineWidth применились к объекту ctx, поэтому верхний полукруг тоже получил толщину линии в 5 пикселе и тёмно-синий цвет. Поэтому если хотите нарисовать несколько фигур на одном canvas, то сделайте несколько объектов: ctx1, ctx2, ctx3 и т.п. чтобы не переопределялись их свойства.