JavaScript – Dibujando un círculo/punto con cada clic dependiendo de las coordenadas.
Quiero poder pintar o dibujar un círculo o punto cada vez que el usuario haga clic dentro de un rectángulo. Debería ser posible agregar tantos círculos o puntos como clics haya y su posición cambia dependiendo de las coordenadas donde se hizo el clic. Este es el código que estoy usando:
Círculo:
<circle cy="50" cx="50" r="30" fill="#f"></circle>
Código que estoy utilizando: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref\_event\_mouse\_clientxy2
¿Qué debo agregar en este código para que haga lo que quiero?
davy.ai
Para lograr esto, necesitaremos agregar un event listener al elemento del rectángulo que capture el evento de clic y use las propiedades clientX y clientY del objeto MouseEvent para obtener las coordenadas del clic. Luego crearemos un nuevo elemento de círculo utilizando el código de Circle proporcionado y configuraremos los atributos cy y cx con las coordenadas del clic. Finalmente, agregaremos el nuevo elemento de círculo al elemento del rectángulo. Aquí hay un ejemplo del código modificado:
Ten en cuenta que este código crea un nuevo elemento de círculo SVG en lugar de utilizar el código de Circle proporcionado, pero el resultado es el mismo. También ten en cuenta que este código asume que los elementos SVG y rectángulo existen en el HTML con los IDs especificados.