Марейн Хавербеке - Выразительный JavaScript

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

Context создаётся методом getContextэлемента .

Before canvas.

After canvas.

var canvas = document.querySelector("canvas");

var context = canvas.getContext("2d");

context.fillStyle = "red";

context.fillRect(10, 10, 100, 50);

После создания объекта contextпример рисует прямоугольник шириной в 100 пикселей и высотой в 50, с координатами левого верхнего угла (10, 10).

Точно как в HTML (и SVG), используемая холстом система координат помещает точку (0, 0) в левый верхний угол, и положительная часть оси Y идёт оттуда вниз. То есть, точка (10,10) на 10 пикселей ниже и правее верхнего левого угла.

В интерфейсе холста форму можно залить, что означает, что занимаемая ею область будет закрашена нужным цветом или шаблоном, или же можно сделать stroke – обвести область линией по краю. Та же терминология используется в SVG.

Метод fillRectзаливает прямоугольник. Он принимает координаты левого верхнего угла x, y, затем ширину и высоту. Схожий метод strokeRectрисует периметр прямоугольника.

Больше у методов параметров нет. Цвет заливки, толщина обводки и другие параметры определяются не аргументами метода (как можно было бы ожидать), а свойствами объекта context.

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

Свойство strokeStyleработает так же, но определяет цвет, которым будет нарисована обводка. Толщина линии определяется свойством lineWidth, которое может содержать любое положительное число.

var cx = document.querySelector("canvas").getContext("2d");

cx.strokeStyle = "blue";

cx.strokeRect(5, 5, 50, 50);

cx.lineWidth = 5;

cx.strokeRect(135, 5, 50, 50);

Когда не заданы атрибуты widthили height, им назначаются значения по умолчанию – 300 для ширины и 150 для высоты.

Путь – последовательность линий. Двумерный холст имеет странный подход к описанию путей. Всё делается через побочные эффекты. Пути – не значения, которые можно хранить или передавать. Вместо этого, если вам что-то надо сделать с путём, вы создаёте последовательность вызовов метода для описания его формы.

var cx = document.querySelector("canvas").getContext("2d");

cx.beginPath();

for (var y = 10; y < 100; y += 10) {

cx.moveTo(10, y);

cx.lineTo(90, y);

}

cx.stroke();

Пример создаёт путь из нескольких горизонтальных отрезков, и затем обводит их методом stroke. Каждый сегмент, созданный через lineTo, начинается с текущей позиции пути. Эта позиция – обычно конец предыдущего сегмента, если только не было вызова moveTo. В последнем случае следующий сегмент начнётся с позиции, заданной в moveTo.

При заливке пути каждая из форм заливается отдельно. Путь может содержать несколько форм – каждое движение moveToначинает новую. Но путь должен быть закрытым (начало и конец находятся на одном месте), прежде чем его можно будет закрасить. Если путь не закрыт, от его конца до начала добавляется линия, и заливается форма, очерченная закрытым путём.

var cx = document.querySelector("canvas").getContext("2d");

cx.beginPath();

cx.moveTo(50, 10);

cx.lineTo(10, 70);

cx.lineTo(90, 70);

cx.fill();

Пример рисует закрашенный треугольник. Заметьте, что непосредственно были нарисованы только две стороны. Третья, от правого нижнего угла обратно к вершине, подразумевается – она не будет закрашена вызовом stroke.

Также можно использовать метод closePath, чтобы принудительно закрыть путь, добавив реальный сегмент до начала пути. Этот сегмент будет закрашен вызовом stroke.

Путь может состоять из кривых. Их рисовать посложнее, нежели прямые.

Метод quadraticCurveToрисует кривую до нужной точки. Для определения кривизны методу даётся контрольная точка вместе с точкой назначения. Представьте, что контрольная точка как бы притягивает линию, задавая кривой кривизну. Линия не проходит через контрольную точку. Вместо этого направления линии в её начальной и конечной точках будут стремиться к контрольной точке. Следующий пример иллюстрирует это:

var cx = document.querySelector("canvas").getContext("2d");

cx.beginPath();

cx.moveTo(10, 90);

// control=(60,10) goal=(90,90)

cx.quadraticCurveTo(60, 10, 90, 90);

cx.lineTo(60, 10);

cx.closePath();

cx.stroke();

Рисуем слева направо квадратичную кривую, у которой контрольная точка задана как (60,10), а затем рисуем два сегмента, проходящие обратно через контрольную точку и начало линии. Результат напоминает эмблему Звёздного пути. Можно увидеть действие контрольной точки: линия, выходящая из начальной и конечной точек, начинается по направлению к контрольной точке, а затем загибается.

Метод bezierCurveрисует схожую кривую. Вместо одной контрольной точки у неё есть две – по одной на каждый из концов кривой. Вот похожий рисунок для иллюстрации поведения такой кривой:

var cx = document.querySelector("canvas").getContext("2d");

cx.beginPath();

cx.moveTo(10, 90);

// control1=(10,10) control2=(90,10) goal=(50,90)

cx.bezierCurveTo(10, 10, 90, 10, 50, 90);

cx.lineTo(90, 10);

cx.lineTo(10, 10);

cx.closePath();

cx.stroke();

Две контрольные точки задают направления обоих концов кривой. Чем они дальше от начала или конца, тем сильнее кривая будет выпучиваться в их направлении.

С этими кривыми сложновато работать – не всегда понятно, как искать контрольные точки, которые приведут к нужной вам форме. Иногда их можно вычислить, иногда приходится подбирать методом проб и ошибок.

Дуги, фрагменты кругов, легче в обращении. Метод arcToпринимает целых пять аргументов. Первые четыре – похожи на аргументы quadraticCurveTo. Первая пара задаёт что-то вроде контрольной точки, вторая – место назначения кривой. Пятый задаёт радиус дуги. Метод создаёт скруглённый угол – линию, идущую к контрольной точке, а затем к точке назначения – и скругляет угол заданным радиусом. Метод arcToрисует круглую часть, а также линию от точки старта до начала закруглённой части.

var cx = document.querySelector("canvas").getContext("2d");

cx.beginPath();

cx.moveTo(10, 10);

// control=(90,10) goal=(90,90) radius=20

cx.arcTo(90, 10, 90, 90, 20);

cx.moveTo(10, 10);

// control=(90,10) goal=(90,90) radius=80

cx.arcTo(90, 10, 90, 90, 80);

cx.stroke();

arcToне рисует линию от конца закруглённой части до точки назначения, несмотря на своё название. Её можно закончить через lineToс такими же координатами.