Как рисовать фигуры

Прямоугольники

За рисование прямоугольников отвечают четыре метода

  • rect(xCoordinate, yCoordinate, width, height)
  • fillRect(xCoordinate, yCoordinate, width, height)
  • strokeRect(xCoordinate, yCoordinate, width, height)
  • clearRect(xCoordinate, yCoordinate, width, height)

Как видите, эти четыре функции принимают одни и те же параметры.
xCoordinate и yCoordinate — указывают позицию прямоугольника. Это левый верхний угол прямоугольника. width и height — указывают размер прямоугольника.

Начнем с функции rect — это очень простая функция. Она определяет точки, и затем рисует линии между ними. Фигура замкнутая, это значит, что мы можем закрасить объект цветом. Мы можем закрашивать только замкнутые фигуры. Потому что иначе, цвет утечёт через дырку и весь холст зальёт краской.

Нарисуем просто квадрат.

context.strokeStyle = "red";
context.lineWidth = 11;
context.lineJoin = "round";
context.rect(50, 200, 200, 200);
context.stroke();

А теперь закрасим его

context.fillStyle = "blue";
context.fill();

Теперь воспользуемся нарисуем сразу закрашенный прямоугольник.
Воспользуемся функцией fillRect. Эта функция рисует закрашенный прямоугольник, цвет которого может быть задан с помощью метода fillStyle.

context.fillStyle = "green";
context.fillRect(300, 200, 200, 200);

Теперь нарисуем прямоугольник, у которого есть только бордеры, без заливки. По своей сути он аналогичен той фигуре, которую рисует rect, но этот прямоугольник нельзя залить цветом.

context.lineWidth = 3;
context.strokeStyle = "blue";
context.lineJoin = "square";
context.strokeRect(550, 200, 200, 200);

Осталось рассмотреть функцию clearRect — это функция для того, чтобы стереть указанную прямоугольную зону на холсте. Она как стирка.

context.clearRect(50,50,200,200);

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

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

Поэтому мы будем использовать arc функцию для их рисования. А затем зальем наши фигуры с помощью функции fill.

Нарисуем круг

  const radian = Math.PI / 180;

  context.beginPath();
  context.strokeStyle = 'red';
  context.lineWidth = 15;
  context.arc(450, 300, 150, radian * 0, radian * 360, false);
  context.stroke();

А что если нам нужно его закрасить?
Мы воспользуемся тем же атрибутом, что и при закраске прямоугольника: fillStyle и fill.

context.fillStyle='orange';
context.fill();

Polygons (Полигоны)

К сожалению, нету простого способа нарисовать полигоны в канвасе. Нету какой то встроенной функции для этого. Нам нужно сделать её самостоятельно.
Сформулируем рисованию полигонов с помощью математических методов.

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

pentagon-1

Определим центр круга, и нарисуем систему координат от этой точки.

pentagon-1

Теперь определим угловые точки нашего пентагона. Нам нужно определить их координаты и нарисвать линии между ними.

Давайте начнем с выбора одной из этих точек, с которой начнем наше рисование.

Давайте нарисуем радиус к этой точке от центра. И определим угол между радиусом и осью x, как угол alfa. Теперь мы можем посчитать координаты начальной точки, согласно этим значениям.

Теперь давайте сделаем вертикальную проекцию на ось x.

pentagon-2

Теперь мы можем посчитать координаты с помощью тригонометрических функций: sin и cos.

Значение координаты x = radius * cos(alfa). Значение координаты y = radius * sin(alfa).

pentagon-2

Координатами нашей точки будут разница между центром и найденной точкой.
x = centerX + x, y = centerY - y.

Давайте найдем остальные точки. Угол между остальными радиусами будет 360 радианов / 5. Более общая формула angle = (2 * Math.PI) / количество углов.

pentagon-4

Теперь у нас есть всё, чтобы найти координаты всех точек.

Пройдемся по всем точкам меняя переменную numAngle с 1 по 4

numAngle = 1;
while(numAngle < 5) {
    x = centerX + radius * Math.cos(alfa + numAngle * angle);
    y = centerY - radius * Math.sin(alfa + numAngle * angle);
    numAngle++;
}

pentagon

Итак, чтобы нарисовать полигон, нам нужны:
* centerX
* centerY
* startAngle
* radius

С этими значениями мы можем нарисовать любые полигоны.

Давайте попробуем нарисовать это прямо сейчас.

// Polygon variables
  let sides = 5,
      radius = 100,
      centerX = 400,
      centerY = 300,
      startAngle = 200,
      angle = (2 * Math.PI) / sides;

      //Start Drawing
      context.beginPath();
      context.strokeStyle='red';
      context.lineWidth=5;
      context.lineJoin='round';

      //Begining Point Coordinates
  let beginX = centerX + radius * Math.cos(startAngle);
  let beginY = centerY - radius * Math.sin(startAngle);

  context.moveTo(beginX, beginY);

  // Draw Lines
  for (let i = 1; i <= sides; i++) {
      // Current point's coordinates
      let currentAngle = startAngle + i * angle;
      let currentPointX = centerX + radius * Math.cos(currentAngle);
      let currentPointY = centerY - radius * Math.sin(currentAngle);

      // Draw the line
      context.lineTo(currentPointX, currentPointY);

  }

  context.closePath();
  context.stroke();