时间戳

首页 > 解决方案 > 如何制作具有锐角弧的画布弧

javascript - 如何制作具有锐角弧的画布弧

问题描述

因此，出于某种原因，我可以发誓这是arc在画布标签中始终有效的方式，但不幸的是，事实并非如此。

所以我期望并最终想要的最终结果是：

canvas.arc(x,y,r,0,360); //ik this should be Math.PI * 2 
canvas.arc(x,y,r,0,270); //and other Math.PI * #
canvas.arc(x,y,r,0,180); //But I used degrees to help show
canvas.arc(x,y,r,0,90);  //how I'd like it to use it.

它将使这些圆圈：

在此处输入图像描述

但不幸的是，当您执行上述代码时，它会做一些不同的事情......它可以很好地创建圆的STROKE部分，但填充它只是从开始角度绘制一条线到结束角度并填充它：

在此处输入图像描述

我能想到的唯一解决方案是以某种方式覆盖圆弧的填充过程，而不是lineTo 另一个角度，首先 lineTo 圆弧的中心，然后回到结束角度。但我不知道如何做到这一点，而且我也不太了解 beizers，无法尝试从头开始重新创建弧线，因此它使用我想要的 lineTo 用法。

总结：如何让我的实心圆圈在部分圆圈的中心有实际的“角度”？

标签： javascripthtmlcanvas

解决方案

画布上的圆圈一开始可能很难绕开你的脑袋，但有一个相当简单的解决方案：

ctx.lineTo();

问题不在于fill()方法，而在于您如何绘制笔画。

这是我的做法：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(50, 50, 50, Math.PI, Math.PI * 1.5, false);
ctx.lineTo(50, 50);
ctx.closePath();
ctx.fill();
<canvas width="100" height="100"></canvas>

解释一下，一旦你完成了弧线的绘制，只需从曲线的一端到圆心画一条线就可以了！这是因为 fill 方法从端点到端点严格地填充所有内容。这种将线画到中心的方法在技术上应该适用于任何部分圆的变体。

推荐阅读