Рисуем полигоны на HTML5-холсте только с JavaScript

Быстрый ответ

Для создания многоугольников на холсте HTML5 начните с применения beginPath(), затем определите вершины фигуры с помощью moveTo() для начальной точки и lineTo() для последующих. Используйте closePath() для замыкания пути и закончите создание контура. Примените stroke() или fill(), чтобы визуализировать многоугольник. Ниже приведён пример кода для построения треугольника:

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);     
ctx.lineTo(100, 150);   
ctx.lineTo(0, 150);     
ctx.closePath();
ctx.stroke();

Вы можете изменять координаты в соответствии со своими предпочтениями и потребностями, создавая многоугольники на холсте. Учтите начальную и конечную точки, чтобы достичь желаемого результата.

Вникаем в математику многоугольников

Для работы со сложными многоугольниками мы обращаемся к математике. Используя циклы и математические функции, можно определить вершины правильных многоугольников. Вот как можно расставить вершины на холсте:

function drawRegularPolygon(ctx, centerX, centerY, sides, size) {
  ctx.beginPath();
  const angleStep = (2 * Math.PI) / sides;
  
  ctx.moveTo(
    centerX + size * Math.cos(0),
    centerY + size * Math.sin(0)
  );

  for (let i = 1; i <= sides; i++) {
    ctx.lineTo(
      centerX + size * Math.cos(angleStep * i),
      centerY + size * Math.sin(angleStep * i)
    );
  }
  
  ctx.closePath();
  ctx.fill();
}

С помощью функций Math.cos() и Math.sin() можно равномерно распределить точки, формируя правильную геометрическую фигуру. Меняйте параметры size, centerX, centerY и sides, чтобы создавать свои уникальные многоугольники.

Стилизация и взаимодействие: Все готово к действию

Небольшие стилевые преобразования дадут вашим многоугольникам новый оттенок. Используйте ctx.strokeStyle и ctx.lineWidth для определения контуров:

ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.stroke();

Теперь у нас не просто неизменные фигуры. Мы можем анимировать наши многоугольники, например, в ответ на события click или mousemove:

canvas.addEventListener('mousemove', function(event) {
  // Перерисовываем многоугольник при движении мыши!
});

Давайте поплывём свободно с комплексными многоугольниками

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

Создайте свои функции, например, fillPolygon, для упрощения работы с холстом:

CanvasRenderingContext2D.prototype.fillPolygon = function(vertices) {
  this.beginPath();
  this.moveTo(vertices[0].x, vertices[0].y);

  vertices.slice(1).forEach(vertex => {
    this.lineTo(vertex.x, vertex.y);
  });

  this.closePath();
  this.fill();
};

Визуализация

Рисование многоугольников — это просто соединение точек на сетке:

Холст: 🖼️
1️⃣---2️⃣
|       |
4️⃣---3️⃣

Линии соединяются в определённой последовательности:

🖌️ От 1️⃣ к 2️⃣, затем к 3️⃣,
🖌️ От 3️⃣ к 4️⃣ и обратно к 1️⃣.

И вуаля, перед вами многоугольник на холсте:

🖼️ Результат: 
  / \
 /   \
/_____\

Оживите свои фигуры, следуя нашим рекомендациям!

Полезные материалы

1. Canvas API – Web APIs | MDN — основное руководство по Canvas API.
2. HTML canvas beginPath() Method — практические примеры изображения фигур, включая многоугольники.
3. Fabric.js Javascript Canvas Library — изучите интерактивную графику и возможности библиотеки Fabric.js для решения более сложных задач.
4. Just a moment... — вдохновляющие примеры интерактивных многоугольников на холсте в CodePen.

Обратите внимание: Названия ссылок указаны в оригинальной форме и могут не полностью соответствовать фактическому заголовку или контексту связанного контента.