Итак, давайте приступим к изучению рисования на канвасе.
Рисование линий
Начнем с простого - с рисования линий. Чтобы понять, как это делается, представьте себе, что у вас есть лист бумаги и карандаш. Вы можете рисовать на этом листе, а можете не рисуя просто перемещать карандаш в нужную точку.
Так же работает и 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.
Смена размера линий
Толщина линии задается с помощью свойства lineWidth. Просто присвойте ему толщину, например так: lineWidth = 5 - получится толщина линии в 5px. Посмотрим на примере: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();
Результат выполнения кода: