Рисование в 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 и т.п. чтобы не переопределялись их свойства.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: