Основы работы с canvas в JavaScript

Итак, давайте приступим к изучению рисования на канвасе.

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

Начнем с простого - с рисования линий. Чтобы понять, как это делается, представьте себе, что у вас есть лист бумаги и карандаш. Вы можете рисовать на этом листе, а можете не рисуя просто перемещать карандаш в нужную точку.

Так же работает и JavaScript: у него есть карандаш (или перо для рисования), в нужное место вы можете перемещать его с помощью метода moveTo, а рисовать - с помощью метода lineTo.

Оба метода параметрами принимают точку, в которую сдвинуть кончик пера - первым параметром координату по горизонтали, а вторым - по вертикали. Начало координат - точка 0,0 - это верхний левый угол элемента.

Когда перо перемещается в нужную точку - метод moveTo просто перемещает, а lineTo в процессе перемещения рисует линию от текущего положения пера до точки, в которое оно переместится.

Что-то типа такого должно нарисовать горизонтальную линию:

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

Эта линия будет выглядеть вот так:

Однако, если запустить приведенный выше код - ничего не произойдет: необходимо написать еще две команды: первая команда beginPath должна быть указана перед началом рисования линии, а вторая команда stroke должна быть вызвана после всех комбинаций moveTo и lineTo для того, чтобы линия нарисовалась.

Итак, давайте напишем рабочий код для рисования линии:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Результат выполнения кода:

Давайте нарисуем птичку:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

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

Результат выполнения кода:

Давайте нарисуем треугольник:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

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

Результат выполнения кода:

Для рисования замкнутой фигуры не обязательно делать все линии - последняя линия может нарисоваться автоматически и замкнуть фигуру. Для этого перед методом stroke следует вызывать метод closePath.

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

Давайте нарисуем треугольник, используя closePath:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 150);
//ctx.lineTo(50, 50); - этот шаг опускаем
ctx.closePath();
ctx.stroke();

Результат выполнения кода:

Закрашивание фигур

Вместо метода stroke можно использовать метод fill - при этом фигура не обязательно должна быть полностью закрытой - она закрасится и так:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 150);
//ctx.lineTo(50, 50); - этот шаг опускаем
//ctx.closePath(); - и этот тоже
ctx.fill();

Результат выполнения кода:

Еще примеры

Нарисуем квадратик:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();

Результат выполнения кода:

Нарисуем квадратик и зальем его через fill:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.fill();

Результат выполнения кода:

Рисование прямоугольников

Квадраты и прямоугольники не обязательно рисовать с помощью комбинаций moveTo, lineTo - для этого есть методы и попроще. Давайте их разберем.

Метод strokeRect(x, y, ширина, высота) рисует в заданной точке контур прямоугольника. Первые два параметра задают координаты точки, в которой окажется верхний левый угол нарисованного прямоугольника.

Давайте нарисуем прямоугольник с помощью strokeRect (считаем, что ctx уже есть):

ctx.strokeRect(50, 50, 100, 75);

Результат выполнения кода:

Метод fillRect(x, y, ширина, высота) работает также, как и strokeRect, только рисует закрашенный прямоугольник. Посмотрим на примере:

ctx.fillRect(50, 50, 100, 75);

Результат выполнения кода:

Следующий метод rect(x, y, ширина, высота) также рисует прямоугольник. Но видимым этот прямоугольник станет, только если применить метод stroke или fill. В первом случае будет контур, а во втором - фигура.

Давайте нарисуем контур с помощью rect:

ctx.rect(50, 50, 100, 75);
ctx.stroke();

Результат выполнения кода:

А теперь нарисуем фигуру:

ctx.rect(50, 50, 100, 75);
ctx.fill();

Результат выполнения кода:

Стирание

Следующий метод clearRect(x, y, ширина, высота) работает как стерка, очищая прямоугольную область, делая содержимое совершенно прозрачным.

Давайте нарисуем квадратик с помощью fillRect и сотрем из него часть с помощью clearRect:

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат выполнения кода:

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

Следующий метод arc(x, y, радиус r, начальный угол startAngle, конечный угол endAngle, рисовать по или против часовой стрелки direction) рисует дугу с центром в точке x,y, радиусом r, начиная с угла startAngle и заканчивая в endAngle в направлении против часовой стрелки direction (принимает значение true или false, true по часовой стрелке, false против часовой (по умолчанию)).

Важно: углы в методе arc измеряют в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать следующую функцию:

function getRadians(degrees) {
	return (Math.PI/180)*degrees;
}

Давайте нарисуем окружность:

ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();

Результат выполнения кода:

Давайте нарисуем половинку окружности:

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();

Результат выполнения кода:

Давайте нарисуем половинку круга (закрасим контур с помощью fill):

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill();

Результат выполнения кода:

Смена цвета

Давайте теперь научимся менять цвет контура и заливки. Для этого есть следующие свойства: свойство strokeStyle устанавливает цвет контура, а свойство fillStyle - цвет заливки. Цвета устанавливаются в обычном CSS формате.

Давайте нарисуем контур с помощью rect и покрасим его в красный цвет:

ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

Результат выполнения кода:

Давайте нарисуем квадратик с помощью rect и покрасим его в зеленый цвет:

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();

Результат выполнения кода:

Важно: когда вы устанавливаете strokeStyle или fillStyle, новое значение применится для всех фигур, которые будут нарисованы с этого момента. Для каждой фигуры, для которой вам нужен другой цвет, вы должны перезаписать значение fillStyle или strokeStyle.

Смена размера линий

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 5; //толщина 5px
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Результат выполнения кода:

Толщину также можно и менять для контуров, например нарисованных с помощью rect:

ctx.rect(50, 50, 100, 100);
ctx.lineWidth = 5;
ctx.stroke();

Результат выполнения кода:

Циклы

Рисование по канвасу можно засовывать в цикл. Давайте нарисуем несколько линий с помощью цикла:

for (var i = 1; i <= 10; i++) {
	ctx.moveTo(50, 15*i);
	ctx.lineTo(150, 15*i);
}

ctx.stroke();

Результат выполнения кода: