有没有办法改变 CanvasRenderingContext2D.arc 让它像馅饼一样显示？答案

【问题标题】：Is there a way to alter CanvasRenderingContext2D.arc so it shows like a pie?有没有办法改变 CanvasRenderingContext2D.arc 让它像馅饼一样显示？
【发布时间】：2019-05-18 01:11:37
【问题描述】：

我已经用 HTML Canvas 试验了几个星期，我使用 .arc 来制作圆圈，但是当圆圈不完整时，它不会像一块馅饼那样显示出来。相反，它使用从一端到另一端的最短距离，并填充其余部分！有没有办法让它显示为馅饼？下面是一个使用 .arc 的示例：

<html>
<head>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2) //supposedly radians for 2
ctx.stroke();
ctx.fillStyle = "black";
ctx.fill();
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
</body>
</html>

【问题讨论】：

先移动到圆弧的中心：ctx.beginPath(); ctx.moveTo(100,75);/*Move to the center*/ ctx.arc(100, 75, 50, 0, 2); ctx.closePath();

标签： javascript html canvas html5-canvas

【解决方案1】：

所以发生的情况是.arc() 从您提供的 x 和 y 坐标创建一个有角度的路径。你需要做的是：

将“绘图指针”移动到要放置圆圈的位置
从那个位置开始一条“路径”，也就是你的圆心
绘制实际的圆弧
回到你的圈子关闭这条路。

以下代码说明了一个工作示例：

const WIDTH   = 100;
const HEIGHT  = 100;
const RADIUS  = 50;
const canvas  = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width  = WIDTH;
canvas.height = HEIGHT;

document.body.appendChild(canvas);

//  identify center of your circle for learning purposes
//  let's use the center of the canvas:
const [dx, dy] = [WIDTH / 2, HEIGHT / 2];
context.fillStyle = 'orange';
context.fillRect(dx, dy, 5, 5);

//  clean / begin your paths
context.beginPath();

//  move to (and start your path to) your position:
context.moveTo(dx, dy);

//  create a circle using the dx,dy as the center of the circle:
const startAngleInRadians = 0;
const endAngleInRadians   = Math.PI * 0.5;
const goAntiClockwise     = false;
context.arc(dx, dy, RADIUS, startAngleInRadians, endAngleInRadians, goAntiClockwise);

//  move back to your position (not required if you only draw 1 pie since your paths dont change):
context.moveTo(dx, dy);

//  let's fill our pie with a pink color!:
context.fillStyle = '#FF00FF55';
context.fill();

为了说明实际发生的情况，我制作了一个简单的画布动画：

const WIDTH   = 200;
const HEIGHT  = 200;
const RADIUS  = 50;
const canvas  = document.createElement('canvas');
const context = canvas.getContext('2d');
const [dx, dy] = [0, 0];

canvas.width  = WIDTH;
canvas.height = HEIGHT;

document.body.appendChild(canvas);

context.strokeStyle = 'red';

function sleep(timeout) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, timeout);
  });
}

async function showHowItWorks() {
  //  move from arc center to the arc start position:
  for (let i=0; i<RADIUS; i++) {
    context.beginPath();
    context.moveTo(dx, dy);
    context.lineTo(dx + i, dy);
    context.stroke();
    await sleep(50);
  }

  //  draw the arc from start position to arc end:
  const angle = Math.PI * 0.5;
  for (let i=0; i<angle; i+=0.05) {
    context.beginPath();
    context.arc(dx, dy, RADIUS, 0, i, false);
    context.stroke();
    await sleep(50);
  }

  //  move from arc end back to the arc center:
  for (let i=50; i>=0; i--) {
    context.moveTo(dx, dy + RADIUS);
    context.lineTo(dx, dy + i);
    context.stroke();
    await sleep(50);
  }
}

showHowItWorks();

当然，也有一些缺陷：我不确定.arc() 命令是移动'绘图指针' - 像.moveTo()- 还是从位置绘制到弧 - 像.lineTo()-。

在第一种情况下，指针从您的中心位置跳到弧线。在第二种情况下，它实际上创建了一条从您的中心到圆弧的线。但无论如何，在大多数情况下，这两种方式都会给你相同的最终结果。

【讨论】：