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

Question

我想用画布绘制一条dounut路径。它包含连接线的内拱和外拱。但是我的画布形象错了。请参见下图。

预期：

这是我的代码。

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

任何人都可以帮我解决这个问题。

谢谢， Bharathi。

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

对于内圈和终点位置，您可以计算它与此类似。

Answer 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