Hello world to the canvas

Всё что нам нужно для начала работы, это браузер который поддерживает html5 и включенный javascript.

Откроем html файл и пропишем туда тег canvas

<canvas id="hello-world-canvas"></canvas>

По умолчанию canvas полностью белый, и лучше бы добавить ему границы, чтобы можно было его увидеть.

Давайте нарисуем прямоугольник в нашем канвасе.

Для начала нам нужно подключить холст в нашем js файле. И определить контекст, в котором будет работать канвас.

Затем нам нужно выбрать кисточку с цветом 😏.
Теперь мы можем нарисовать наш прямоугольник нашей синей кисточкой.

Метод fillRect принимает четыре аргумента: два первых — это координаты, два последних — это ширина и высота прямоугольника.

const canvas = document.querySelector("#hello-world-canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.fillRect(10, 40, 30, 70);

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

context.fillStyle = "yellow";
context.fillRect(50, 30, 60, 30);

У канваса так же есть fallback в том случае, если браузер не поддерживает холст. Всё что нужно, это написать мессагу между тэгами canvas.

<canvas id="hello-world-canvas">This is fallback message</canvas>

Это сообщение не видно в браузерах, которые поддерживают холст.

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

Холст — это DOM элемент, и он должен быть загружен до нашего js кода. Поэтому лучше поместить весь наш код под хэндлер onload.

Чтобы начать рисовать линию, стоит воспользоваться методом beginPath(). Сам по себе этот метод ничего не рисует, он сбрасывает предыдущую линию, и позволяет Вам начать рисовать новую. Без неё вы брисобачите Ваш текущий рисунок к предыдущему. Теперь начнем рисунок с помощью функции moveTo(x,y). Она принимает два аргумента — координат стартовой точки. А указать конец линии можно с помощью функции lineTo(x,y) — которая также принимает две координаты (конца линии). Но мы ничего не увидим пока не нарисуем её, с помощью метода stroke().

context.beginPath();
context.moveTo(30, 70);
context.lineTo(130, 70);
context.stroke();

Но, что если мы захотим изменить цвет линии? Как вы видели, мы нарисовали линию с помощью метода method(). Это функция, которая как ручка или кисточка, которая рисует линии между двумя точками. Итак, нам нужно изменить цвет нашей кисти. Сделать это можно с помощью метода strokeStyle — и вставим его после beginPath.

context.strokeStyle = "red";

И наконец, как нам изменить толщину линии? С помощью метода lineWidth

context.lineWidth = 10;

Рисование сложных линий

Например нужно нарисовать зигзаг.
Начнем с рисования простой линии

context.beginPath();
context.moveTo(30, 70);
context.lineTo(130, 70);
context.stroke();

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

Line caps

Мы можем управлять как будут выглядеть кончики линий.
За это отвечает метод lineCap, у которого есть 3 метода:

  • butt (default)
  • round
  • square
context.lineCap = "butt";

Имейте в виду, что square и round немного удлиняют линию.

Line Joins (Сращивание линий)

context.lineJoin = 'miter|bevel|round'
Этот метод отвечает за то, как линии соединятся, когда их конечные точки встретятся.
Этот атрибут может получать три разных значения.

  • miter — значение по умолчанию
  • bevel
  • round

Если указать miter, то соединяются линии под прямыми углами, если bevel, то под скошенными на краях, и round — закругленные края.

context.beginPath();
context.lineWidth = 20;
context.lineJoin = "round"; // miter | bevel | round
context.moveTo(10, 30);
context.lineTo(130, 30);
context.lineTo(130, 130);
context.lineTo(30, 130);
context.lineTo(30, 230);
context.stroke();

Shadows (Тени)

Есть 4 специальных атрибута, отвечающих за тень

  • shadowColor
  • shadowOffsetX
  • shadowOffsetY
  • shadowBlur
context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 20;
context.shadowColor = "grey";
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 5;
context.moveTo(100, 60);
context.lineTo(200, 60);
context.stroke();

Drawing Curves

Чтобы рисовать наши изогнутые линии, мы будем использовать функцию arc()

arc(x, y, radius, startAngle, endAngle, counterClockWise);

Она принимает 6 аргументов.
Первые два аргумента — центр координат круга.
Третий аргумент — радиус этого круга.
Следующие два аргумента — углы круга, другими словами, количество круга между этими двумя значениями углов.

Значения этих углов — в радианах, не в градусах.

Последний аргумент необязательный и означает направление нашей дуги. По умолчание это значение — false. Если true — то нарисует против часовой стрелки.

Итак, мы рисуем наши кривые по направлению часовой стрелки.
arc.

Итак, начнем рисовать.
Сначала определим радианы.
А затем можно и рисовать.

const radian = Math.PI / 180;

context.beginPath();
context.strokeStyle = "blue";
context.lineWidth = 10;
context.arc(100, 100, 50, 0 * radian, 180 * radian, false);
context.stroke();

Quadratic Curves

А что если нам нужно нарисовать еще более сложные линии? Например параболлу.
Мы воспользуемся методом quadraticCurveTo!

Эта функция принимает 4 аргумента:
* controlX
* controlY
* endX
* endY

Первые два аргумента это координаты контрольной точки. А последние два — это координаты конечной точки пути.
Что за контрольная точка? Это точка, которая тянет нашу линию по направлению к себе.

quadratic curve

Это точка растяжения кривой.
Вот как рисуются квадратные кривые:

quadratic curve
quadratic curve

Так как же нам нарисовать такую кривую. Она также является путём. Поэтому начнём рисовать её как обычно.

context.beginPath();
context.strokeStyle='red';
context.lineWidth=10;
context.moveTo(200, 250);
context.quadraticCurveTo(100, 100, 400, 250);
context.stroke();

Bezier Curves (Кривые Безье)

Квадратичные кривые не всегда могут удовлетворить наши нужды. Тогда на сцену выходят кривые безье. Вот с их помощью можно нарисовать что угодно.
Их можно рисовать с помощью метода bezierCurveTo().
В отличии от квадратичных кривых, у кривых Безье две контрольные точки.

bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

Она принимает 6 аргументов:
Первые два — координаты контрольной точки «Один»
Вторые два — координаты контрольной точки «Два»
Последные две — координаты конца пути.

Как работают кривые Безье:
bezier

context.beginPath();
context.strokeStyle='red';
context.lineWidth=10;
context.moveTo(200, 250);
context.bezierCurveTo(100, 100, 500, 100, 400, 250);
context.stroke();