使用画布元素绘制甜甜圈路径答案

【问题标题】：draw donut path using canvas element使用画布元素绘制甜甜圈路径
【发布时间】：2026-01-31 11:00:02
【问题描述】：

我想用画布画一个甜甜圈路径。它包含用线连接的内拱和外拱。但我得到错误的画布图像。请看下图。

预期：

这是我的代码。

 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();

请任何人帮我解决这个问题。

谢谢，婆罗洲。

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

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

要解决这个问题，你必须计算你的外圆的起始位置（取决于起始角度）。您应该尝试使用 sin 或 cos 来计算您的“新”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);

对于内圈和结束位置，您可以类似地计算它。

【讨论】：

【解决方案2】：

我已经使用 css 完成了它

        var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
        gradient.addColorStop(0, "#008B8B");
        gradient.addColorStop(0.75, "#F5DEB3");
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

只需从我上面的代码中删除最后两行，你会看到内圈再次出现

SEE DEMO HERE

【讨论】：

如果您有任何问题。也可以问这个问题