Блог

Главная - Вопросы по программированию - Преобразование окружности в полилинию в JavaScript

Преобразование окружности в полилинию в JavaScript

#javascript #geometry

#javascript #геометрия

Вопрос:

У меня есть в качестве входных данных радиус окружности и координаты X и Y центра. Я хотел бы иметь на выходе координаты соединенной серии отрезков (многоугольная цепочка), которая аппроксимирует окружность. Есть ли способ сделать это в JavaScript?

Комментарии:

1. Math.sin() и Math.cos() . Все остальное относится конкретно к вашему вопросу.

Ответ №1:

Мы используем холст и context.lineTo(x, y); для рисования полигонов в Javascript. Чтобы получить сегменты, выполните итерацию, увеличивая angle параметрическое уравнение окружности:

 let x = center.x   radius * Math.cos(angle);
let y = center.y   radius * Math.sin(angle);

Это рабочий пример:

 let radius = 50;
let segments = 10;
let segmentAngle = Math.PI * 2 / segments;
let center = { x: 100, y: 75 };
let points = [];
for (let angle = 0; angle < 2 * Math.PI; angle  = segmentAngle) {
  points.push({
    x: center.x   50 * Math.cos(angle),
    y: center.y   50 * Math.sin(angle)
  });
};
paintSegments(points);
console.log(points);

function paintSegments(points) {
  let canvas = document.getElementById("myCanvas");
  let context = canvas.getContext("2d");
  context.beginPath();
  points.forEach(function(point) {
    context.lineTo(point.x, point.y);
  });
  context.lineTo(center.x   radius, center.y);
  context.stroke();
} 
 <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>