如何使用Canvas计算电场合力箭头的旋转角度？

我用Canvas实现电场可视化，有三个Canvas元素：canvas1、canvas2是分力箭头，canvas3是合力箭头。之前基于图一的几何模型编写了计算合力箭头旋转角度的JS代码，现在换成图二的模型，需要确认当前计算逻辑是否适配，或者该怎么调整？

现有JavaScript代码 #

let angle1 = positivo1; //positivo1 = canvas1的旋转角度
let angle2 = 180 - positivo2; //positivo2 = canvas2的旋转角度
let angleBetween = 180 - (angle1 + angle2);

let resultantForce = Math.sqrt(Math.pow(f1,2) + Math.pow(f2,2) - 2*f1*f2*Math.cos(angleBetween)); //F1、F2为分力大小

let senBeta = ((Math.sin(angleBetween)/resultantForce))*f1;
let Beta = Math.asin(senBeta);

let resultantAngle = angle1 + Beta;

canvas3.style.transform = `rotate(${resultantAngle}deg)`;

几何模型 #

旧模型（图一） #

新模型（图二） #

逻辑适配分析与调整方案 #

你的旧代码是基于力的反向延长线形成的钝角夹角设计的（对应图一的几何关系），但新模型是两个分力从同一点出发的实际夹角，因此现有逻辑需要针对性调整：

1. 夹角计算修正
   旧代码里的angleBetween是推导的钝角，新模型中，两个分力的实际夹角应为|angle2 - angle1|（假设positivo1和positivo2都是以x轴正方向为基准的旋转角度），无需再通过180°做转换。

2. 余弦定理公式调整
   旧代码用的是钝角场景的变形公式F合² = F1² + F2² - 2F1F2cosθ，新模型需使用标准余弦定理（直接代入实际夹角的余弦值）：

   // θ为两个分力的实际夹角（转弧度计算）
   const radBetween = angleBetween * Math.PI / 180;
   let resultantForce = Math.sqrt(Math.pow(f1,2) + Math.pow(f2,2) + 2*f1*f2*Math.cos(radBetween));
   

3. 合力角度计算改用分量合成法
   旧代码用正弦定理求β存在Math.asin返回值范围限制（仅[-90°,90°]），钝角场景易出错，建议改用分量合成法，适配所有角度场景：

   // 转弧度计算分量
   const rad1 = angle1 * Math.PI / 180;
   const rad2 = angle2 * Math.PI / 180;
   const fx = f1 * Math.cos(rad1) + f2 * Math.cos(rad2);
   const fy = f1 * Math.sin(rad1) + f2 * Math.sin(rad2);
   
   // 计算合力角度并修正为0-360°范围
   let resultantAngle = Math.atan2(fy, fx) * 180 / Math.PI;
   if (resultantAngle < 0) resultantAngle += 360;
   

4. 分力角度基准统一
   旧代码里angle2 = 180 - positivo2是适配旧模型的角度反转，新模型中如果positivo2本身就是以x轴正方向为基准的旋转角度，直接用angle2 = positivo2即可。

调整后的完整代码示例 #

// 统一角度基准：positivo1、positivo2都是以x轴正方向为0°的旋转角度
const angle1 = positivo1;
const angle2 = positivo2;

// 计算合力大小（可选，不需要可跳过）
const angleBetween = Math.abs(angle2 - angle1);
const radBetween = angleBetween * Math.PI / 180;
const resultantForce = Math.sqrt(Math.pow(f1,2) + Math.pow(f2,2) + 2*f1*f2*Math.cos(radBetween));

// 分量合成法计算合力角度
const rad1 = angle1 * Math.PI / 180;
const rad2 = angle2 * Math.PI / 180;
const fx = f1 * Math.cos(rad1) + f2 * Math.cos(rad2);
const fy = f1 * Math.sin(rad1) + f2 * Math.sin(rad2);

let resultantAngle = Math.atan2(fy, fx) * 180 / Math.PI;
// 修正为0-360°的正角度
if (resultantAngle < 0) resultantAngle += 360;

canvas3.style.transform = `rotate(${resultantAngle}deg)`;

内容的提问来源于stack exchange，提问作者user20202873