Javascript 如何绘制圆弧'；任意三角形的角是多少？

我已经实现了一个javascript程序，它可以绘制任意三角形，并计算角度和边的长度。 下面是一个我试图实现的程序：
遗憾的是，我不能画三角形的弧！

也许通过HTML canvas arc（）方法可以实现。例如：

ctx.arc(x, y, 50, start , end);

x-y位置是已知的。我在寻找角度的“开始”和“结束”

提前谢谢。

Math.atan2 可以使用Math.atan2获取直线的方向

比如说

  // line from x1,y1 to x2,y2
  var nx1 = x2 - x1;
  var ny1 = y2 - y1;
  var angle = Math.atan2(ny1,nx1); 

所以你可以从一个角得到两条线的角度。角度在-Math.PI到Math.PI的范围内，因此如果第一个角度较低，则需要将第一个角度移动到第二个角度之前，否则将需要很长的时间

还有三角形方向的问题，可以是顺时针或逆时针方向。如果方向错误，角度将位于外侧。您可以使用两行的叉积来查找方向。如果方向不对，则只需交换两个角度

演示功能 使用鼠标移动其中一个点

const ctx=canvas.getContext（“2d”）；
//两条线从x1，y1开始，然后在x2，y2处连接，然后向外延伸到x3，y3
功能绘图线和角度（x1、y1、x2、y2、x3、y3）{
//获取从x2，y2到其他点的向量
变量nx1=x1-x2；
var ny1=y1-y2；
变量nx2=x3-x2；
var ny2=y3-y2；
变量lineAngle1=数学参数atan2（ny1，nx1）；
变量lineAngle2=数学参数atan2（ny2，nx2）；
//使用叉积找到正确的方向。
如果（nx1*ny2-ny1*nx2<0）{//交换方向错误
常数t=线性角2；
lineAngle2=lineAngle1；
线性角1=t；
}
//如果角度1在后面，则向前移动
if（线性角1<线性角2）{
lineAngle1+=Math.PI*2；
}
//渲染弧
ctx.fillStyle=“红色”；
ctx.beginPath（）；
ctx.moveTo（x2，y2）；
ctx.弧（x2，y2，35，线性角1，线性角2）；
ctx.fill（）；
//渲染外弧
ctx.fillStyle=“蓝色”；
ctx.beginPath（）；
ctx.moveTo（x2，y2）；
ctx.弧（x2，y2，7，lineAngle2，lineAngle1）；
ctx.fill（）；
//找到中点
常数mx=-Math.cos（（线性角1+线性角2）/2）*50+x2；
常数my=-Math.sin（（lineAngle1+lineAngle2）/2）*50+y2；
//渲染角度
ctx.fillStyle=“黑色”；
ctx.font=“16px arial”；
ctx.textAlign=“中心”；
ctx.textb基线=“中间”；
ctx.fillText(
（360-（lineAngle1-lineAngle2）*（180/Math.PI））.toFixed（0），//转换为度
mx，
我的，
)
}
//捷径变压器
var w=画布宽度；
var h=画布高度；
var cw=w/2；//居中
var-ch=h/2；
//主更新功能
功能更新（计时器）{
setTransform（1,0,0,1,0,0）；//重置转换
ctx.globalAlpha=1；//重置alpha
如果（w！==内部宽度| | h！==内部高度）{
cw=（w=canvas.width=innerWidth）/2；
ch=（h=canvas.height=innerHeight）/2；
}否则{
ctx.clearRect（0,0，w，h）；
}	
//起跑线
常数x=数学cos（定时器/5000）*数学min（连续，连续）*0.95+cw；
常数y=Math.sin（定时器/5000）*Math.min（连续，连续）*0.95+ch；
//填充三角形
ctx.fillStyle=“#FD8”；
ctx.beginPath（）；
ctx.lineTo（x，y）；
ctx.lineTo（连续波，连续波）；
ctx.lineTo（mouse.x，mouse.y）；
ctx.closePath（）；
ctx.fill（）；
抽绳和角度（x，y，cw，ch，mouse.x，mouse.y）；
抽绳和角度（cw、ch、鼠标.x、鼠标.y、x、y）；
抽绳和角度（鼠标.x，鼠标.y，x，y，cw，ch）；
//渲染线条
ctx.strokeStyle=“黑色”；
ctx.lineWidth=3；
ctx.lineJoin=“圆形”；
ctx.beginPath（）；
ctx.lineTo（x，y）；
ctx.lineTo（连续波，连续波）；
ctx.lineTo（mouse.x，mouse.y）；
ctx.closePath（）；
ctx.stroke（）；
requestAnimationFrame（更新）；
}
requestAnimationFrame（更新）；
常量鼠标={x:0，y:0，按钮：false，拖动：false，拖动开始：false，拖动开始：false，拖动开始：false，拖动开始：0，拖动开始：0}
功能鼠标事件（e）{
mouse.x=e.pageX；
mouse.y=e.pageY；
mouse.button=e.type==“mousedown”？true:e.type==“mouseup”？false:mouse.button；
}
[“向下”、“向上”、“移动”].forEach（name=>document.addEventListener（“mouse”+name，mouseEvents））
canvas{位置：绝对；顶部：0px；左侧：0px；}
我非常感谢你的回答。你解决得很清楚。非常感谢：）我尝试了另一种方法，这是最好的解决方案。谢谢