如何在某些X和Y位置创建HTML元素

Question

我有一个简单的项目想法，该项目是您单击显示并创建一个点，然后再次单击以创建第二个点并连接这两个点，我的问题是如何在相同的鼠标位置创建HTML元素。例如，我点击位置:X: 69, Y: 41，我想在相同的位置创建HTML元素，我知道如何获得鼠标位置:

const mousePos = (e: PointerEvent) => {
const _Xpos: number = e.clientX;
const _Ypos: number = e.clientY;
};
window.addEventListener("click", mousePos);

Answer 1

如果你只想组成一个图像，那么我建议你最好使用画布。

然而，如果你想要HTML，你需要一个全屏容器(div高度:100vh，宽度:100wh或100%)与位置相对。

然后，在单击时，为其添加位置为绝对且left=x top=y的子元素。

为方便起见，最好使用css来定位:

。容器{位置:相对;}.container祝辞*{位置:绝对;}

then, on click:

const e = document.createElement("div");
container.appendChild(e);
e.style.top = _Xpos + "px";
e.style.left = _Ypos + "px";