在 JavaScript 中将圆转换为折线

Question

我输入了圆的半径和圆心坐标 X 和 Y。我想在输出中输出近似于圆的一系列连接的线段（多边形链）的坐标。在 JavaScript?

中有这样做的方法吗？

Answer 1

我们使用 canvas 和 context.lineTo(x, y); 在 Javascript 中绘制多边形。要获取段，请在使用圆的 parametric equation 递增 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>

在 JavaScript 中将圆转换为折线

Convert a circle to a poly line in JavaScript

javascript

geometry