Así que aquí está el código:
HTML:
<canvas id="gameCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas>JS:
var canvas = document.getElementById("gameCanvas"); var ctx = canvas.getContext("2d"); canvas.addEventListener("click", function (evt) { var mousePos = getMousePos(canvas, evt); ctx.beginPath(); ctx.arc(evt.x, evt.y, 50, 0, 2 * Math.PI); ctx.stroke(); }, false); function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; }El problema que tengo es cuando trato de pintar, pinta en el lienzo cuando hago clic, pero lo que quiero es que pinte cuando mantengo el dedo sobre el lienzo.
Editar: lo que quiero es hacer una herramienta de pintura, quiero eso cuando estoy arrastrando para dibujar en el lienzo que dibuja. Pero en mi código se dibuja cuando hago clic. Estoy usando una pantalla táctil, por lo que debe funcionar para dispositivos móviles y PC.
Cuando sostengo el lienzo y luego lo arrastro, no sigo dibujando
Así es como quiero que sea: http://literallycanvas.com/
Los eventos de clic se activan una vez por clic y cualquier dato que extraiga del evento pertenece a ese instante. Como dice la primera respuesta, mousemove es el evento que desea investigar.
He hecho una implementación de trabajo a continuación que creo que hace lo que está buscando, utiliza tres detectores de eventos mousedown establece un valor booleano para habilitar el dibujo, mousemove activa el dibujo y actualiza continuamente, mouseup alterna el valor booleano establecido por mousedown para evitar el dibujo a menos que usted vuelve a dorar el mouse hacia abajo mientras mueves el mouse.
Reduje el radio de tu círculo porque no estoy seguro exactamente de lo que estás tratando de dibujar, ahora traza el mouse.
const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); let mouseDown = false; let mouseUp = true; canvas.addEventListener('mousedown', (event) => { mouseDown = !mouseDown; // toggle mouseDown true/false; }); canvas.addEventListener('mousemove', (event) => { if (mouseDown) { redraw(event.clientX, event.clientY); } }); canvas.addEventListener('mouseup', (event) => { mouseDown = !mouseDown; // toggle mouseDown true/false; }); function redraw(X,Y) { // console.log(X, Y); ctx.beginPath(); ctx.arc(X, Y, 2, 0, 2 * Math.PI, false); ctx.stroke(); } <canvas id="gameCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas>// object to store mouse position reading var mousePosition = { x: 0, y: 0 }; function onMouseMove(event) { // detect possible changes in mouse position if (mousePosition.x != event.clientX || mousePosition.y != event.clientY ) { mousePosition.x = event.clientX; mousePosition.y = event.clientY; // code to draw goes here .... } } // use mouse move event on the canvas canvas.addEventListener("mousemove", onMouseMove);además, se podría establecer un intervalo dentro de la cláusula onMouseMove if para espaciar los pasos de dibujo.
Comentario adicional: mousePos no se usa en el código original, es por eso que probablemente se dibuja en una posición desplazada. MouseEvent tiene offsetX y offsetY , puede usarlos directamente en lugar de cualquier cálculo adicional.
Si solo desea dibujar cada vez que el usuario mueve el mouse sobre el lienzo, independientemente de presionar o no presionar un botón, mousemove es el evento que podría usar:
<canvas id="gameCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas> <script> let canvas = document.getElementById("gameCanvas"); let ctx = canvas.getContext("2d"); canvas.addEventListener("mousemove", function(evt) { ctx.beginPath(); ctx.arc(evt.offsetX, evt.offsetY, 5, 0, 2 * Math.PI); ctx.stroke(); }); canvas.addEventListener("touchmove", function(evt) { ctx.beginPath(); ctx.arc(evt.offsetX, evt.offsetY, 5, 0, 2 * Math.PI); ctx.stroke(); }); </script> Si desea que suceda algo incluso cuando el mouse no se mueve, solo está sobre el lienzo, se necesita algún tipo de temporizador. Aquí es solo un requestAnimationFrame() simple, que es suficiente para una prueba simple:
<canvas id="gameCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas> <script> let canvas = document.getElementById("gameCanvas"); let ctx = canvas.getContext("2d"); let lastevent = false; let r = 0; function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); if (lastevent) { ctx.strokeStyle = "rgb(" + r + ",0,0)"; r += 8; if (r > 255) r = 0; ctx.beginPath(); ctx.arc(lastevent.offsetX, lastevent.offsetY, 5, 0, 2 * Math.PI); ctx.stroke(); requestAnimationFrame(animate); } } canvas.addEventListener("mousemove", function(evt) { lastevent = evt; }); canvas.addEventListener("mouseover", function(evt) { lastevent = evt; animate(); }); canvas.addEventListener("mouseout", function(evt) { lastevent = false; }); </script>