是否可以不使用.arc（）或任何其他HTML标记制作一个圆圈？

Question

我正在尝试使用HTML画布，当我使用.arc（）画一个圆时，我不知道如何获取所有要点。有人知道吗？

Answer 1

要绘制一个近似的圆并获取该圆的点，可以在圆形图案线中绘制一系列线段，以便：

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

/* Center and radius of circle */

const centerX = 50;

const centerY = 50;

const radius = 25;

/* Array containing your points */

const points = [];

/* Configure line rendering and start drawing a path */

ctx.lineWidth = 2;

ctx.strokeStyle = "red";

ctx.beginPath();

/* Iterate each side and calculate the position of it's starting point */

for (let i = 0, sides = 50; i < sides; i ++) {

  

  const angle = (i / sides) * 2 * Math.PI;

  const x = centerX + radius * Math.cos(angle);

  const y = centerY + radius * Math.sin(angle);

  

  points.push({ x, y });

  ctx.lineTo(x, y);

  }

  

/* Complete path and render as stroke */

ctx.closePath();

ctx.stroke();

console.log(points);

<canvas id="canvas" width="200" height="200"></canvas>