JavaScript - 根据坐标每次点击绘制一个圆/点

Question

我希望每次用户在矩形内单击时都能够绘制或绘制一个圆/点。应该可以添加与点击一样多的圆圈/点，并且它们的位置会根据点击的坐标而变化。这是我正在使用的代码：

圈子：

 <circle cy="50" cx="50" r="30" fill="#f"></circle>

我正在使用的代码：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_mouse_clientxy2

我应该在这段代码中添加什么以便它执行我想要的操作？

Answer 1

您需要在<svg> 标签中添加<circle> 标签。

const svg = document.querySelector('svg');

svg.addEventListener('click', e => {
  const { pageX, pageY, currentTarget } = e;
  const { left, top } = currentTarget.getBoundingClientRect();
  const { pageXOffset, pageYOffset } = window;
  const x = pageX - left - pageXOffset;
  const y = pageY - top - pageYOffset;
  const diameter = Math.floor(Math.random()*100);
  
  svg.innerHTML += createCircle({ x, y }, diameter);
});

function createCircle(center, diameter) {
    const randomColor = Math.floor(Math.random()*16777215).toString(16);

    return `
    <circle
        cx="${center.x}"
      cy="${center.y}"
      r="${diameter/2}"
      fill="#${randomColor}"
    ></circle>
  `;
}

.container {
  border: 1px solid #000;
  height: 300px;
  width: 500px;
}

svg {
  height: 100%;
  width: 100%;
}

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg"></svg>
</div>

此外，更改了 clientX/Y 属性以考虑容器、窗口偏移/坐标以实现滚动兼容性。