Lectura de Eventos en Canvas con JavaScript

 

Lectura de Eventos en Canvas con JavaScript

En este ejercicio, aprenderemos a manejar eventos del ratón (clic, movimiento y soltar) sobre un elemento <canvas> utilizando JavaScript puro.

🎨 Estructura HTML del Canvas

Primero, creamos un canvas con dimensiones y estilo definidos:

html
<canvas id="canvas" width="500" height="300" style="border: 2px solid #000000;"></canvas>
<body onload="inicializar()"> <!-- Llama a la función al cargar la página -->

🖱️ JavaScript: Capturando Eventos

El siguiente código muestra cómo detectar interacciones con el ratón:

javascript
var miCanvas;

function inicializar() {
    miCanvas = document.getElementById('canvas');
    
    // Event Listeners
    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('Posición: x:' + x + ' - y:' + y); // Coordenadas (X,Y)
}

function sueltaRaton(e) {
    console.log('¡Ratón soltado!');
}

function clickRaton(e) {
    console.log('¡Ratón pulsado!');
}

📝 Explicación:

  1. inicializar():

    • Selecciona el canvas y configura tres eventos:

      • mousedown: Al pulsar el botón del ratón.

      • mouseup: Al soltarlo.

      • mousemove: Al moverlo (registra coordenadas).

  2. posicionRaton(e):

    • Usa e.pageX y e.pageY para obtener la posición del cursor respecto al documento.

  3. Resultado:

    • Al interactuar con el canvas, la consola mostrará mensajes como:

      text
      ¡Ratón pulsado!
Posición: x:150 - y:200
¡Ratón soltado!

🚀 ¿Por qué es útil?

  • Ideal para videojuegos o aplicaciones interactivas.

  • No requiere librerías externas (JavaScript nativo).

🔗 Prueba el código y observa cómo responde a tus acciones en el canvas.

🎥 Mini-clase adjunta:

"Aprende a manipular el canvas y sus eventos para construir interfaces dinámicas."

Comentarios

Publicar un comentario

Entradas más populares de este blog

codigo

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Protagonista y Disparos con Barra de Vida </ title > </ head > < body onload = " inicializa()" >     < canvas id = "canvas" width = "500" height = "300" style = " border:2px solid #000" ></ canvas > < script > let canvas, ctx; let FPS = 50 ; let vida = 100 ; // Imagen del protagonista let imgMega = new Image(); imgMega.src = 'img/mega.jpeg' ; // Inicialización function inicializa() {     canvas = document.getElementById( "canvas" );     ctx = canvas.getContext( "2d" );     setInterval(principal, 1000 / FPS); } // Clase Protagonista class Protagonista {     constructor (x, y) {         this .x = x;       ...
Leer más

5. 04.funciones parte1

  Post: Funciones en JavaScript - Parte 1 https://image.png Duración:  8:17 / 8:34 Introducción a las funciones en JavaScript Hola, ¿qué tal? Vamos a ver ahora el tema de las funciones en JavaScript, un concepto fundamental para desarrollar nuestros videojuegos. Variables iniciales javascript var vida = 100 ; var ataque = 10 ; var pocion = 20 ; Creando nuestra primera función La sintaxis básica de una función comienza con la palabra reservada  function , seguida del nombre de la función: javascript function muestraVida ( ) { console . log ( vida ) ; } Esta función tiene la tarea de mostrar nuestra vida actual en la consola. Para llamarla, simplemente usamos su nombre: javascript muestraVida ( ) ; Integrando funciones con HTML Podemos conectar esta función a un botón en HTML: html < button onClick = " muestraVida ( ) " > Mostrar Vida </ button > Cada vez que hagamos clic en este botón, se ejecutará la función y veremos nuestro nivel de vida (10...
Leer más