如何知道Canvas曲线的终点在哪里

Question

我是Canvas的新手，我不知道如何弄清楚曲线的开始或结束（好吧，弧线）。我想画一个冰淇淋蛋筒，它是这样的：

<canvas id="5" width="280" height="280"></canvas>

<script>
var ctx = document.getElementById("5").getContext("2d");

var radio = 100;

ctx.beginPath();
ctx.arc(ctx.canvas.width/2, 20, radio, 0.7*pi, 0.3*pi, true);
ctx.lineTo(ctx.canvas.width/2, ctx.canvas.height-20);
ctx.lineJoin = "round";
ctx.lineTo(ctx.canvas.width/2, ctx.canvas.height-20);
// missing line
ctx.stroke();
ctx.closePath();
<script>

如何从当前点到弧的开头画一条线？

Answer 1

要知道弧的终点在哪里看一下这个图：

正如您所看到的，角度系统始终以0弧度指向右方开始（前提是尚未应用旋转）。 2 x PI是一整圈。

因此，对于一个弧，它开始例如0.5 x PI将是直线向下，而1.5 x PI是直线向下。

因此，例如，如果您的绝对角度：startAngle = 1.75弧度（包括PI）和endAngle = 5.65，您的弧线看起来就像这样（线条是我添加的线条以显示起始角度，但您也可以看到您可以只需在绘制圆弧之前使用moveTo创建附加线 - 有关详细信息，请参阅演示：

如果您的起始角度大于结束角度（即您想以相反的方式绘制），

arc有一个可选参数，这允许您以逆时针方式绘制。

ctx.arc(cx, cy, cx, startAngle, endAngle, ccw);

Arc toy

这是一个简单的玩具，您可以在其中使用角度滑块来查看圆弧终点的最终位置。它还处理起始角度大于结束角度。

如果我在最后输入一个closePath()，那么路径会在最后一点关闭我的第一个点，在这种情况下你可以得到一个馅饼：

Answer 2

您可以在 ctx.stroke

之前放置ctx.closePath 来关闭您的圆锥体

ctx.beginPath();
ctx.arc(ctx.canvas.width/2, 20, radio, 0.7*pi, 0.3*pi, true);
ctx.lineTo(ctx.canvas.width/2, ctx.canvas.height-20);
ctx.lineJoin = "round";
ctx.lineTo(ctx.canvas.width/2, ctx.canvas.height-20);
ctx.closePath();
ctx.stroke();

如果你想在弧线上的任何一点找到XY，你可以这样做：

function calcXYonArc(centerX,centerY,radius,radianAngle){
    var x=centerX+radius*Math.cos(radianAngle);
    var y=centerY+radius*Math.sin(radianAngle);
    return({x:x,y:y});
}

// used like this:

var xy=calcXYonArc(canvas.width/2,20,radio,.7*pi);
ctx.fillStyle="red";
ctx.fillRect(xy.x-2,xy.y-2,4,4);