He creado un círculo aquí para que cuando se haga clic en la pantalla, el círculo se mueva allí. Y también tengo un punto fijo (vértice) que quiero que estos dos puntos sean el origen y el destino de una línea.
const coordinates = document.querySelector(".coordinates"); const circle = document.querySelector(".circle"); const result = document.querySelector(".result"); const numbers = document.querySelectorAll("p"); coordinates.addEventListener("click", e => { circle.style.setProperty('--x', `${e.clientX}px`); circle.style.setProperty('--y', `${e.clientY}px`); }) var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(50,100); ctx.stroke(); canvas { color: rgb(255, 255, 255); } .circle { width: 20px; height: 20px; border-radius: 50%; position: fixed; --x: 47px; left: calc(var(--x) - 10px); --y: 47px; top: calc(var(--y) - 10px); background-color: white; } .bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #24232e; } .coordinates { height: 100%; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="bg"> <div class="coordinates"> <canvas id="myCanvas" width="200" height="100" style=""></canvas> </div> </div> <div class="circle"> </div> </body> </html>¿Cómo hacer esto con lienzo? ! se lo agradeceria <3
Puede detectar la posición del mouse en el lienzo y dibujar una línea a las coordenadas. para obtener el lienzo x e y del mouse, debe hacer algunos cálculos porque las coordenadas del sitio son un poco diferentes a las del lienzo.
Una descripción más detallada está aquí: https://stackoverflow.com/a/17130415/14076532
Esto funcionará solo si el lienzo es lo suficientemente grande, lógicamente...
Espero que esto ayude:
const coordinates = document.querySelector(".coordinates"); const circle = document.querySelector(".circle"); const result = document.querySelector(".result"); const numbers = document.querySelectorAll("p"); coordinates.addEventListener("click", e => { clicked(e); circle.style.setProperty('--x', `${e.clientX}px`); circle.style.setProperty('--y', `${e.clientY}px`); }) var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.strokeStyle = "#de7270"; // change your color here NOTE: this will remain until you change it ctx.moveTo(0,0); ctx.lineTo(50,100); ctx.stroke(); function clicked(event) { ctx.save(); // some canvas-safety-stuff ctx.beginPath(); let mousepos = getMousePos(event); // get the mouse position in "canvas-cooridnates" ctx.clearRect(0,0, c.width, c.height) // erease the canvas ctx.moveTo(0, 0); ctx.lineTo(mousepos.x, mousepos.y); // draw the line to the mouse ctx.closePath(); ctx.stroke(); // closing of the canvas-safety-stuff ctx.restore(); } function getMousePos (evt) { var rect = c.getBoundingClientRect(), // abs. size of element scaleX = c.width / c.width, // relationship bitmap vs. element for X scaleY = c.height / rect.height; // relationship bitmap vs. element for Y return { x: (evt.clientX - rect.left) * scaleX, // scale mouse coordinates after they have y: (evt.clientY - rect.top) * scaleY // been adjusted to be relative to element } } canvas { color: rgb(255, 255, 255); } .circle { width: 20px; height: 20px; border-radius: 50%; position: fixed; --x: 47px; left: calc(var(--x) - 10px); --y: 47px; top: calc(var(--y) - 10px); background-color: white; } .bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #24232e; } .coordinates { height: 100%; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="bg"> <div class="coordinates"> <canvas id="myCanvas" width="200" height="100" style=""></canvas> </div> </div> <div class="circle"> </div> </body> </html>