JavaScript

Question

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

圈子：

 <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 属性以考虑容器，window offsets/coordinates 以实现滚动兼容性。

JavaScript - 根据坐标每次点击绘制 circle/dot

JavaScript - Drawing a circle/dot with each click depending on the coordinates

html

drawing

mouseevent

coordinates