Javascript 从两个x，y点和一个中心x，y点在画布上绘制圆弧

我试图从两个点（X，Y线）画一条弧

但是我不知道怎么做，所以我可以指定开始角度和结束角度

我得到了中心点（p2），半径=r。起点（p1）和终点（p3）。 如下图所示

我想做的是用弧线画一条圆线，如下图所示

关于这个主题，我所发现的只是一个例子，其中圆弧从0到2*Math.PI

ctx.arc(100,75,50,0,2*Math.PI);

像这样。A想不出用p1和p3代替这些数字的方法。有谁能解释一下这是怎么回事，也许能给我一个机会看看我如何解决这个问题

ctx.arc(100,75,50,0,2*Math.PI);

这里前两个参数是点p2x，y坐标，第三个参数是圆r的半径。 第四和第五个论点是弧的起始角和结束角

假设m21是连接点1（x1，y1）和点2（x2，y2）的直线的斜率

m21=（y2-y1）/（x2-x1）

假设m21是连接点3（x3，y3）和点2（x2，y2）的直线的斜率

m23=（y2-y3）/（x2-x3）

我会的

如果点2是原点，则解决方案更简单

ctx.arc(100, 75, 50, Math.atan2(x1,y1), Math.atan2(x3,y3), true)

arc（）

方法仅适用于角度，因此必须根据点的位置和到中心的距离（在这种情况下，表示半径的距离必须相同）转换点

最重要的是：

无效弧（无限制双x，
无限制双y，
无限制双半径，
无限制双星缠结，
无限制双端角，
可选布尔值逆时针=假）

您可以通过简单的三角法找到从中心P2到P1/P3的两个角度：

var startAngle = Math.atan2(p1.y - p2.y, p1.x - p2.x),
    endAngle   = Math.atan2(p3.y - p2.y, p3.x - p2.x);

假设半径已知，现在可以将这些数据输入圆弧法：

ctx.arc(p2.x, p2.y, radius, startAngle, endAngle);

如果半径未知但已知相同，则可以执行以下操作：

var diffX = p1.x - p2.x,
    diffY = p1.y - p2.y,
    radius = Math.abs(Math.sqrt(diffX*diffX + diffY*diffY));

例子

var p2={x:100，y:100}，
p1={x:111，y:30.9}，
p3={x:149.5，y:149.5}，
diffX=p1.x-p2.x，
diffY=p1.y-p2.y，
半径=Math.abs（Math.sqrt（diffX*diffX+diffY*diffY）），
startAngle=数学atan2（diffY，diffX），
endAngle=Math.atan2（p3.y-p2.y，p3.x-p2.x），
ctx=document.querySelector（“canvas”）.getContext（“2d”）；
//弧
弧（p2.x，p2.y，半径，星形，端角，假）；
ctx.stroke（）；
//点/线帮助器：
ctx.fillRect（p1.x-2，p1.y-2，4，4）；
ctx.fillRect（p2.x-2，p2.y-2，4，4）；
ctx.fillRect（p3.x-2，p3.y-2,4,4）；
ctx.beginPath（）；
ctx.moveTo（p1.x，p1.y）；
ctx.lineTo（p2.x，p2.x）；
ctx.lineTo（p3.x，p3.x）；
ctx.strokeStyle=“#999”；
ctx.stroke（）
从p2到p1和p2到p3的距离总是一样的吗？是的，半径总是一样的。如果我明白你的意思，我想做的是得到p1和p2的起始角和结束角。在这个例子中，你不明白你是如何得到它的。只是一个小问题，我能从圆心画一条线吗？我只想要一条圆线。@DaCh当然，他们只是想说明原始数据的基础。只需忽略最后一个代码块（//points/line helpers…及以下）。（仅为圆弧添加了代码段）
var diffX = p1.x - p2.x,
    diffY = p1.y - p2.y,
    radius = Math.abs(Math.sqrt(diffX*diffX + diffY*diffY));