Javascript para interacción: método drawImage() para imágenes animadas

Método drawImage() para animar imágenes estáticas o desde plantilla de sprites

Ya vimos que un método es un código (agrupado en una función) que recibe referencias de valores que luego serán usadas para alterar propiedades de una referncia. Esta puede ser un conjunto de datos, como la posición de un contenedor de imagen.

En el caso de hoy, drawImage() es un método que apunta a valores de propiedades que necesitaremos para, por ejemplo, ubicar un contenedor de imagen en el elemento canvas, y también para darle dimensiones y otras alteraciones interactivas a ese mismo contenedor.

drawImage() recibe como máximo nueve parámetros, pero siendo solo tres de ellos los fijos o siempre requeridos. Recordemos que un parámetro es la referencia a una o más propiedades de algún otro conjunto de datos a los que debemos ingresar nuevos valores. En sencillas palabras, un parámetro es un valor que se espera obtener para realizar otros cálculos.

En el caso del método drawImage(), podrán haber tantos métodos en el conjunto interactivo, tantos como se requieran, pero será necesario evaluarlos en su desempeño si esos métodos son excesivos en cantidad.

En Javascript

context.drawImage(
  // Referencia a la imagen que debe ser mostrada o alterada
   referenciaImagen,

  // Ubicación horizontal de imagen (acepta negativo)
   coordX,

  // Ubicación vertical imagen (acepta negativo)
   coordY,

  // OPC: ancho de la imagen
   ancho,

  // OPC: alto de la imagen
   alto,

  // Recorte horizontal de imagen
   rx,

  // Recorte vertical de imagen
   ry,

  // que es esto
   ax,

  // que es esto
   ay
);

Tener en cuenta que la imagen del recuadro (en X) tiene 150px por lado. El comportamiento de cada parámetro de drawImage() lo resumo así.

Ejemplo abajo: context.drawImage(img, -50, 0)

Ejemplo abajo: context.drawImage(img, 100, 50, img.width / 2, img.height / 2)

Ejemplo abajo: context.drawImage(img, 0, 0, 100, 100, 50, 10, 150, 150)

Las relaciones de estos parámetros con el elemento mostrado son las siguientes.

En Javascript

ctx.drawImage(
img,  /* Referencia imagen */ 
0,    /* OPC: Posición X (Horizontal) de la esquina superior izquierda de la IMAGEN CONTENIDA en el subrectángulo */
0,    /* OPC: Posición Y (Vertical) de la esquina superior izquierda de la IMAGEN CONTENIDA en el subrectángulo */

100,  /* OPC: Ancho del rectángulo (que contiene la imagen) Es decir, ancho de la imagen recortada */
100,  /* OPC: Altura del rectángulo (que contiene la imagen) Es decir, alto de la imagen recortada */

50,    /* -- Ubicación X de Subrectángulo de imagen en el canvas. */
10,    /* -- Ubicación Y de Subrectángulo de imagen en el canvas. */

150,   /* OPC: Escala horizontal de la imagen. Si no esta aqui, la imagen desaparece. */
150    /* OPC: Escala vertical de la imagen. Si no esta aqui, la imagen desaparece. */
       /* Estos dos últimos parecieran que también influyen en la imagen crop */
);

Según lo anterior, el método drawImage() expone de manera visual el comportamiento de los parámetros que apuntan a las propiedades de ubicación de un elemento imagen añadido a canvas, y cómo su papel es alternado cuando esa misma estructura de parámetros contiene más de dos de ellos.

Hasta aquí hemos revisado muy brevemente algunos aspectos (no todos) del uso del elemento HTML canvas en web. En las secciones anteriores vimos:

• El uso de condicionales e iteradores
• El uso de eventHandlers o manejadores de eventos
• Una introducción al criterio de programación orientada a objetos como una herramienta que facilita crear código complejo
• El uso de la API HTML Canvas
• La manipulación del DOM para generar interactividad en web
• El uso de imágenes sprites
• El uso del método drawImage() para crear formas lineales y polígonos, expuesto aquí en esta sección.