如何在 html canvas arc 中从 startAngle 和 endAngle 找到更小的角度?

问题描述

我想总是有一个更小的角度,我不知道如何决定逆时针或不在 html canvas 中绘制弧线。

这是我的代码

this.ctx.beginPath();

const startAngle = Math.atan2(P1.y - P2.y,P1.x - P2.x);
const endAngle = Math.atan2(P3.y - P2.y,P3.x - P2.x);

this.ctx.arc(P2.x,P2.y,40,startAngle,endAngle,true);

smaller angle

larger angle

解决方法

您正在处理 2D 平面中的向量。逆时针由右手定则和面外方向决定。

vector cross-product 是您需要的操作。如果您将第一个向量与第二个向量相交所获得的向量的符号为正,则角度为逆时针方向。

叉积将为您提供一个归一化向量,即逆时针为 (0,1) 或顺时针为 (0,-1)。标准化叉积并查看 z 分量的符号。