canvas不使用arc函数，也可以画圆形的办法canvas不使用arc函数，也可以画圆形的办法............

html

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <canvas id="canvas" width="800" height="800"></canvas>
  </body>
</html>

javascript

const $canvas = document.getElementById("canvas");
const ctx = $canvas.getContext("2d");
ctx.fillStyle = "skyblue";
const RAD = Math.PI / 180;
const points = [
  [100, 0],
  [0, 100]
];

function draw(startVector, slice = 360) {
  const points = [];
  const sliceRatio = slice / 360;
  const r = startVector[0];
  for (let i = 0; i < slice; i++) {
    const radian = sliceRatio * i * RAD;
    const x = Math.cos(radian) * r;
    const y = Math.sin(radian) * r;
    points.push([x, y]);
  }
  ctx.save();
  ctx.lineWidth *= 2; // 保持为默认线框的2倍，可以抗锯齿
  ctx.beginPath();
  ctx.translate(400, 400);
  for (let i = 0, len = points.length; i < len; i++) {
    i === 0
      ? ctx.moveTo(points[i][0], points[i][1])
      : ctx.lineTo(points[i][0], points[i][1]);
  }
  ctx.closePath();
  ctx.stroke();
  ctx.fill();
  ctx.restore();
}

draw([100, 0]);

// 用arc方法画一个来做对比
ctx.beginPath();
ctx.arc(200, 200, 100, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
ctx.stroke();

canvas不使用arc函数，也可以画圆形的办法

html

javascript

结果图