是否可以在不使用 .arc() 或任何其他 HTML 标记的情况下制作圆圈

Question

我正在尝试用HTML中的画布进行实验，当我使用.arc((制作一个圆圈时，我不知道如何获得它的所有点。有人知道怎么做吗？

Answer 1

你可以画一个圆圈，得到它的分数，你可以做这样的事情：

let c = document.getElementById("circle");
let ctx = c.getContext("2d");
let cw = c.width = 250;
let ch = c.height = 200;
let cx = cw / 2,
  cy = ch / 2;
  //the array of points
  let points = []
ctx.lineWidth = 3;
ctx.strokeStyle = "#64b150";
//circle's radius
let r = 75;
ctx.beginPath();
for (let a = 0; a < 2*Math.PI; a+=.1) {
  let o = {}//a point on the circle
  o.x = cx + r * Math.cos(a);
  o.y = cy + r * Math.sin(a);
  points.push(o);
  ctx.lineTo(o.x, o.y)
  }
ctx.closePath();
ctx.stroke();

canvas{border:1px solid;}

<canvas id="circle"></canvas>

正如 Kaiido 评论的那样，您需要选择不同的增量而不是 .1：for (let a = 0; a < 2*Math.PI; a+= increment) {

Answer 2

在 html 中使用 svg，例如：

圆形图像：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50"/>
</svg>

您还可以更改半径和其他详细信息。请参阅此链接： https://www.w3schools.com/graphics/svg_intro.asp

Answer 3

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

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>