El canvas de HTML 5 (IX). Combinando elementos.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

Ya sabemos cómo incluir imágenes en un canvas. También hemos aprendido a insertar formas primitivas y textos. En este artículo vamos a aprender cómo podemos combinar ambos tipos de elementos para lograr el resultado que buscamos en nuestro diseño web.

En realidad, es muy fácil, ya que sólo es repetir lo que ya sabemos. Sin embargo, hay algunos detalles que debemos tener en cuenta, y de los que hablaremos en este post. Espero que te resulte interesante.

ANTES DE EMPEZAR

Antes de empezar a montar nuestro canvas (cuyo aspecto final hemos reproducido a la derecha), debemos tener en cuenta algunas cosas:

Los elementos se colocan en el canvas según el orden en el que se definan en el código. Así, el primer elemento que definimos (sea una imagen, una primitiva o un texto) se colocará “en el fondo” del canvas, es decir, lo más alejado posible del observador. El siguiente elemento que definimos se colocará encima del primero, por lo que, si coinciden parcial o totalmente, lo solapará. Y, así, sucesivamente.

Cuando establecemos coordenadas para una primitiva, si aún no hemos colocado ninguna imagen en el canvas, dichas coordenadas se entienden como referidas al punto 0, 0 (esquina superior izquierda) del canvas. Este es el comportamiento normal que ya conocemos. Sin embargo, si colocamos primitivas después de haber colocado una imagen, las coordenadas de posicionamiento se entienden referidas a la esquina superior izquierda de la imagen, que no necesariamente coincidirá con la del canvas. Esto podría, al principio, confundirnos un poco, pero en seguida se pilla el tranquillo.

Esto no cuenta para los textos: las coordenadas siempre se entienden referidas con respecto al canvas, con independencia de que, antes del texto, hayamos insertado una imagen.

EL CÓDIGO

El código no lo hemos reproducido aquí porque, desde el punto de vista de la programación, no nos ofrece nada nuevo. Como ya es habitual, te lo he dejado, con los correspondientes comentarios, en este enlace. Así puedes probarlo y modificar cosas para ver como funciona.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *