Рисуем линии
Один из самых примитивных элементов рисования в HTML5 Canvas есть линия. Для того чтобы нарисовать линию необходимо провести несколько шагов, а именно:
Получить контекст (см. выше)
Установить параметры линии
Назначить стартовую точку от которой будет происходить рисование
Указать точку в которую будет проведена линия
Вызвать функцию отрисовки
Пример:
window.onload = function(){
//получение canvas
var canvas = document.getElementById("myCanvas");
//получение контекста
var context = canvas.getContext("2d");
//стиль линии
context.strokeStyle = "blue";
context.lineCap = "round";
context.lineWidth = 10;
//перемещаем стартовую точку
context.moveTo(50, 50);
//рисуем линии
context.lineTo(230, 140);
context.lineTo(330, 90);
//вызываем функцию отрисовки
context.stroke();
}
Рис.3. Результат выполнения функции
Описание примера: после получения контекста мы начали устанавливать свойства отрисовки, а именно установили цвет штриха в синий (canvas.strokeStyle = "blue";), установили толщину линии в 10px (context.lineWidth = 10;) и установили закругленный стиль концов линии (context.lineCap = "round").
В общем, свойство lineCap может принимать несколько параметров- "round","butt","square". Последний параметр, по существу, не отличается от предыдущего, за исключением того, что в параметре "square" на конце линии будет добавлен наконечник размером в толщину линии. Можете поэкспериментировать на больший размерах линии, чтобы увидеть принципиальное отличие.
После того, как все свойства линии установлены, начинаем рисовать линии. Для начала переведем точку начала рисования в координаты x:50,y:50 методом moveTo(startX,startY). Потом уже укажем метод lineTo(toX, toY), который уже и проведет линию от стартовой точки startX,startY в точку toX,toY и установит стартовую точку отрисовки в toX,toY, что означает, что все последующий вызов метода lineTo будут уже отрисовываться уже от toX,toY, и т. д.
После того, как все свойства линии и сами линии в принципе указаны, мы вызываем метод stroke() уже непосредственно для отрисовки штрихов.
Дуга и окружность
Рисовать все объекты только лишь линиями, конечно же, можно, но было бы неплохо добавить немного округлости в нашу графику, а именно такой примитив, как дуга.
Рис.4. Результат выполнения функции
Функция для создания дуги выглядит так:
arc(x, y, radius, startAngle, endAngle, anticlockwise);
Какие аргументы принимает функция arc:
x, y - координаты центра, относительно которого будет производится рисование дуги.
radius - радиус от x,y до дуги
startAngle, endAngle - начальный и конечный угол отрисовки дуги
anticlockwise - направление, по которому будет происходить отрисовка (по умолчанию true, т.е. против часовой стрелки)
Например, нарисуем дугу, в середине canvas, с радиусом 50px, стартовым углом 1.1*PI и конечным 1.9*PI, и будем рисовать ее по часовой стрелке, передав последнему параметру аргумент false.
context.arc(canvas.width / 2, canvas.height / 2, 50, 1.1 * Math.PI, 1.9 * Math.PI, false);
Также заметим, что при прохождении функцией arc угла в 2*PI, то мы получаемокружность и при этом не имеет значения по часовой стрелке или против мы проходим отрисовку.
context.arc(canvas.width / 2, canvas.height / 2, 50, 0, 2 * Math.PI, false);
Для того чтобы проще себе представлять себе работу функции arc, можно воспользоваться следующим изображением, который подробно все иллюстрирует:
Рис.5. Работа функции arc
Зигзаг
В данной статье мы рассмотрим, как с помощью итерационного соединения линий нарисовать зигзаг.
Рис.6. Результат выполнения функции
Приступаем к рисованию:
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var startX = 85;
var startY = 70;
var zigzagSpacing = 60;
//определяем стиль линии зигзага
context.lineWidth = 10;
context.strokeStyle = "#0096FF";
context.beginPath();
context.moveTo(startX, startY);
//рисуем сам зигзаг
//рисуем семь линий
for(var n=0; n<7; n++){
var x = startX + ((n+1) * zigzagSpacing);
var y;
if(n % 2 == 0){ //если n четно
y = startY + 100;
}
else{
y = startY;
}
context.lineTo(x, y);
context.stroke();
}
}
Описание примера: чтобы нарисовать зигзаг мы можем соединить чередующиеся диагональные линии в одну. Программно это реализуемо установкой цикла, который рисует диагональные линии, которые двигаются в право-вверх на нечетных итерациях и вниз-вправо на четных. Ключевой момент, на который необходимо обратить свое внимание - это метод beginPath(). По существу этот метод объявляет буквально, что "путь начинается". Далее все манипуляции по рисования осуществляются непосредственно нарисованием точки. Без данного метода нам бы пришлось утомительно каждый раз переназначать новое положение линии посредством метода moveTo().