为何通过自定义函数计算旋转元素端点坐标时会出现值错误问题

问题原因 #

1. 全局变量ttheta未在每次计算前重置
   你定义的ttheta是全局变量，调用func2时会在上一次计算的结果基础上继续累加角度。第一次点击Try按钮计算结果是对的，但第二次及之后点击时，ttheta已经包含了之前多次计算的总和，结果自然出错。
   而你单独计算的写法每次直接给ttheta赋值为两个角度的和，不会携带上一次的历史值，所以不会有这个问题。

2. 偏移量计算错误使用了绝对值
   你计算最终坐标时对dx、dy加了Math.abs()，这会丢失角度的方向信息：当旋转角度为负时，偏移量本应为负，加绝对值后会把方向搞反，自然出现部分场景正确、部分场景错误的问题。

修复方案 #

只需要修改getPos函数，每次计算前先把ttheta重置为0，同时去掉偏移量计算的绝对值即可：

function getPos() {
  if (!animePause) {
    animeAll.forEach(e => {
      e.classList.add("AnimatePaused");
    })
    animePause = true;
  } else {
    animeAll.forEach(e => {
      e.classList.remove("AnimatePaused");
    })
    animePause = false;
    // 动画播放状态下无需计算坐标可直接返回
    return;
  }

  let h, w, x, dx, tx, y, dy, ty = "";
  leg1.style.outline = "1px solid red"
  h = leg1.offsetHeight;
  w = leg1.offsetWidth;
  x = leg1.getBoundingClientRect().left;
  y = leg1.getBoundingClientRect().top;
  // 每次计算前重置ttheta为0，避免历史值累加
  ttheta = 0;
  func2(leg2);
  func2(leg1);
  dx = (Number(h * (Math.sin(ttheta * (Math.PI / 180)))) + Number(w * (Math.cos(ttheta * (Math.PI / 180))))).toFixed(2);
  dy = (Number(w * (Math.sin(ttheta * (Math.PI / 180)))) + Number(h * (Math.cos(ttheta * (Math.PI / 180))))).toFixed(2);
  // 去掉绝对值，保留方向信息
  tx = (Number(x) + Number(dx)).toFixed(2);
  ty = (Number(y) + Number(dy)).toFixed(2);
  console.log("计算得到的端点坐标 X:" + tx, "Y:" + ty);
}

修改后自定义函数的写法也能得到正确结果，和单独计算两个角度相加的效果完全一致。

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