2-canvas
Este código crea un lienzo en la página web y permite interactuar con él utilizando el ratón. Cuando cargas la página, la función inicializar()se ejecuta automáticamente gracias al atributo onloaden el cuerpo del HTML. Esta función configura el lienzo ( canvas) para escuchar eventos del ratón. Eventos que detectan: mousedown: Se dispara cuando haces clic sobre el lienzo. Al suceder, se ejecuta la función clickRaton()que muestra en la consola el mensaje "pulsando ratón". mouseup: Se activa cuando sueltas el botón del ratón. Llama a la función sueltaRaton(), que imprime "soltado ratón" en la consola. mousemove: Este evento detecta el movimiento del ratón mientras está sobre el lienzo. La función posicionRaton()obtiene la posición actual del ratón (coordenadas xe y) y las muestra en la consola. En resumen, este código registra interacciones básicas del ratón sobre un lienzo para capturar clics, movimientos y la acción de soltar el botón, mostrando los resultados en la consola.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="inicializar()">
<canvas id="canvas" width="500" height="300" style="border:2px solid #000000"></canvas>
<script>
var miCanvas;
function inicializar() {
miCanvas = document.getElementById('canvas');
miCanvas.addEventListener('mousedown', clickRaton, false);
miCanvas.addEventListener('mouseup', sueltaRaton, false);
miCanvas.addEventListener('mousemove', posicionRaton, false);
}
function posicionRaton(e) {
var x = e.pageX;
var y = e.pageY;
console.log('x:' + x + '-y' + y);
}
function sueltaRaton(e) {
console.log('soltado raton');
}
function clickRaton(e) {
console.log('pulsando raton');
}
</script>
</body>
</html>
Comentarios
Publicar un comentario