Html 如何使用画布知道曲线的终点在哪里

我是画布新手，我不知道如何找出曲线（嗯，圆弧）的起点或终点。我正在画一个冰淇淋蛋筒，它是这样的：

<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>

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

var ctx=document.getElementById（“5”）.getContext（“2d”）；
var无线电=100；
ctx.beginPath（）；
ctx.arc（ctx.canvas.width/2,20，无线电，0.7*pi，0.3*pi，真）；
ctx.lineTo（ctx.canvas.width/2，ctx.canvas.height-20）；
ctx.lineJoin=“圆形”；
ctx.lineTo（ctx.canvas.width/2，ctx.canvas.height-20）；
//缺线
ctx.stroke（）；
ctx.closePath（）；

---

如何从当前点到弧的起点绘制一条线？

您可以通过将ctx.closePath放在ctx.stroke之前来闭合圆锥体

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，可以按如下方式进行：

<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>

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

---

要知道圆弧的端点在哪里，请查看此图：

如您所见，角度系统始终以0弧度开始指向右侧（前提是尚未应用旋转）。2 xπ是一整圈

所以对于一个弧，它开始，例如，0.5 xπ是直线下降，而1.5 xπ是直线上升

例如，如果您的绝对角度为：startAngle=1.75弧度（包括PI）和endAngle=5.65，则您的圆弧将如下所示（该线是我添加来显示起始角度的，但您也可以看到，您可以在绘制圆弧之前使用moveTo简单地创建一条附加线-有关详细信息，请参阅演示）：

arc

有一个可选参数，如果您的开始角度大于结束角度（即，您希望以相反的方式绘制），该参数允许您按时钟顺序绘制

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

这是一个简单的玩具，你可以在那里玩角度滑块，看看圆弧的端点在哪里结束。它还处理起始角大于结束角的情况

如果我在末尾放入一个

closePath（）

，路径将用最后一个点关闭我的第一个点，在这种情况下，您可以得到一个饼图：