Javascript 根据主图元的位置和旋转角度添加新图元

我正在用香草javascript构建一个游戏，你可以在雷达上发现鱼。我正在努力实现以下目标：

我希望对象（鱼）在转盘旋转时随机出现在转盘的位置上（在宽度/高度上随机出现）。我能够获得转盘的角度和位置，但我不知道如何计算新对象的位置

我目前的丑陋解决方案包括在刻度盘内创建一个临时div，获取位置，并将其用于新对象，但它实际上无法正常工作

看看我到目前为止有什么

function createNewFish() {

// Create new fishies

/*
const pos = document.getElementById('dial').getBoundingClientRect();
const degrees = getDialDegrees();

console.log(pos)
console.log(degrees)

// Calculate position for fish?
*/

---

对于任何试图这样做的人，我已经设法使用以下解决方案解决了它：

当你有一个旋转的刻度盘时，你可以用一些相等的div（我用9）来填充刻度盘，如下所示：

这将返回刻度盘上div的位置，您可以使用它将元素放置在雷达上

---

希望这对别人有帮助

您可以使用canvas或SVG。这不是答案：如果您不想使用divs，我建议您研究html5canvas。更优雅的香草JS游戏开发解决方案。

function DialGenerator() {
  for(let i=0;i<9;i++) {
    const insideDial = document.createElement('div');
    insideDial.classList.add('dial-inside')
    insideDial.setAttribute('id', 'dial-inside-'+i)
    document.getElementById('dial').appendChild(insideDial)
  }
}

function getPosition() {
    const n = getRandomNumber(1, 6);
    // Get a random position on the dial for the fish to appear on
    const dialPosition = document.getElementById('dial-inside-'+n).getBoundingClientRect();
    return {'top':dialPosition.top, 'left':dialPosition.left}
 }