javascript - 使用canvas元素绘制 donut 路径

Question

我想使用 Canvas 绘制一个 donut 路径。它包含用线连接的内、外拱形。但我得到了错误的 Canvas 图像。请参阅下图。

预期:

这是我的代码。

 this.ctx.beginPath();
 this.ctx.moveTo(options.x, options.y);
 this.ctx.arc(options.x, options.y, options.radius, options.start, options.end, false);
 this.ctx.lineTo(options.x, options.y);
 this.ctx.arc(options.x, options.y, options.innerR, options.start, options.end, false);
 this.ctx.closePath();

请大家帮我解决这个问题。

谢谢， 巴拉蒂。

Answer 1

当将你的“笔”移动到(options.x, options.y)，然后围绕该点画一个圆时，你的“笔”首先必须到达弧线的起始位置。此处绘制了您不希望在 Canvas 上出现的线条。

要解决这个问题，您必须计算外圆的起始位置(取决于起始 Angular )。您应该尝试使用 sin 或 cos 来计算"new"x 和 y。

它看起来像这样

var newX = options.x + options.radius * cos(options.start);
var newY = options.y + options.radius * sin(options.start);

然后移动到这个位置

this.ctx.moveTo(newX, newY);

并围绕旧的 x 和 y 画圆

this.ctx.arc(options.x, options.y, options.radius, options.start, options.end, false);

对于内圆和结束位置，您可以与此类似地计算。