在画布中动态添加下拉菜单

Question

我想创建一个允许编写化学式的画布 这个想法是使用六边形，可以在他的顶峰上单击以更改原子。因此，当我们单击六角形峰时，会出现一个下拉菜单，我们可以在其中选择原子。 我可以将下拉菜单作为同级添加到画布，并借助容器将其定位，但是如何动态地（单击鼠标）在画布上添加下拉菜单。

下拉菜单示例

任何想法，欢迎反思。 我做了一个简单的六边形，可以表示环己烷  有代码建议的人

var canvas = document.querySelector('#canvas').getContext('2d'),side = 0,
    size = 100,
    x = 100,
    y = 100;

canvas.beginPath();
canvas.moveTo(x + size * Math.cos(0), y + size * Math.sin(0));

for (side; side < 7; side++) {
  canvas.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6));
}


canvas.stroke();

#canvas {
  width: 200px;
  height: 200px;
}

<canvas id="canvas" width="400" height="400"></canvas>

Answer 1

我要做的是：

1. 页面上已经有一个不可见的下拉框，画布元素的外部
2. 在单击画布时，检查并查看用户是否单击了六角形。 （检查与鼠标单击的距离是否在屏幕上任何六边形的范围内）
3. 如果它在六边形的范围内，请将不可见的下拉框移动到六边形的位置，然后将其变为可见。

如果您需要一个例子，请告诉我。

我已经在以下CodePen中编写了一个示例：https://codepen.io/darrylhuffman/pen/OqmBja

这是我用来确定用户是否单击原子，然后移动下拉框的逻辑：

document.body.addEventListener('mouseup', e => {
    let atom = atoms.find(a => distance(a.position, { x: e.pageX, y: e.pageY}) <= a.r)
    atomDropdown.classList.remove('hidden')
    if(atom){
       atomDropdown.style.left = atom.position.x + 'px'
       atomDropdown.style.top = (atom.position.y + atom.r) + 'px'
    }
})

不过，请务必阅读我在CodePen中的所有代码，因为我相信您可能想采用我在生成原子/键/等时所采用的方法。