0
174
VistasAgregar punto en la cuadrícula del lienzo
Esta es una cuadrícula de lienzo con las coordenadas etiquetadas cuando hace clic en la cuadrícula aquí . ¿Puedo preguntar cómo colocar un punto rojo en la cuadrícula como se muestra en la imagen? Proporcione una demostración para comprender :)
function showCoords(event) { var x = event.clientX - 10; var y = event.clientY - 10; var coords = "X coordinates: " + x + ", Y coordinates: " + y; document.getElementById('showCoords').innerHTML = coords; }
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Bien, primero puedes crear una clase CSS para los puntos rojos:
<style> .red-dot { position:absolute; width:5px; height:5px; background:red; } </style> Luego intente modificar el método showCoords() :
function showCoords(event) { // Calculate the position of the nearest grid intersection: var x = (Math.floor(event.clientX/10) * 10) - 2; var y = (Math.floor(event.clientY/10) * 10) - 2; var coords = "X coordinates: " + x + ", Y coordinates: " + y; document.getElementById('showCoords').innerHTML = coords; // Create a new red dot: let newDot = document.createElement('span'); // Add the CSS class: newDot.className = 'red-dot'; // Set coordinates: newDot.style.top = y + 'px'; newDot.style.left = x + 'px'; // Add the new element to the end of the body: document.body.appendChild(newDot); }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta