html5画布上的意外结果

我想画两条穿过三个点的线，在第二个点上画一个圆角。我有个问题。如果两条直线之间的角度小于90度，则会在通过点1和点2的直线上附加一条额外的直线。但是，如果角度大于或等于90度，就可以了

您可以在下面的代码段中看到这一点：

功能点（x，y）{
这个.x=x？x:0；
这个.y=y？y:0；
}
var ctx，
canvas=document.getElementById（'canvas'）；
画布宽度=600；
帆布高度=600；
ctx=canvas.getContext（'2d'）；
ctx.lineWidth=2；
绘制（ctx，新点（50,10），新点（20300），新点（100320））；
绘制（ctx，新点（200,10），新点（200,300），新点（300,20））；
功能图（ctx、p1、p2、p3）{
变量k1，k2，k，len，r=8；
k1=数学atan2（p2.y-p1.y，p2.x-p1.x）；
k2=数学atan2（p3.y-p2.y，p3.x-p2.x）；
k=（k1-k2）/2；
len=Math.abs（r/Math.tan（k））；//切点与p2之间的距离
ctx.moveTo（p1.x，p1.y）；
ctx.lineTo（p2.x-len*Math.cos（k1），p2.y-len*Math.sin（k1））；//直线到切点
ctx.arcTo（p2.x，p2.y，p2.x+len*Math.cos（k2），p2.y+len*Math.sin（k2），r）；//然后是arc
ctx.lineTo（p3.x，p3.y）；//直到p3
ctx.stroke（）；
}

---

我找不到您的错误，因此重新开始查看

除非P1和P3的顺序不正确，否则看起来工作正常。（小提琴上的最后一个例子）可以理解为什么会发生这种情况，但还没有进行纠正

当它出错时的解释

以P2为原点，旋转P1，使P1至P2位于P1为正的x轴上，当P3.y为负时绘图失败

希望这有帮助

---

编辑现在已经解决了上述订单问题

数学。当角度大于90度时，atan2

将返回负角度，这对角度

k

有错误影响。要解决此问题，请在计算

k1

和

k2

后添加以下代码：

kk1 = k1<0 ? k1+Math.PI : k1;
kk2 = k2<0 ? k2+Math.PI : k2;
k = (kk1-kk2)/2;

---

kk1=k1您可以在距离P2的
len
距离处正确停线，然后尝试将
arcTo
直接绘制到
P2.x，P2.y
。你应该非常感谢，我发现了我的问题，因为Math.atan2，当角度大于90度时，它将返回一个负角度，因此它将影响我的夹角“k”，所以我修改它如下：