Jugando con CANVAS

Con este ejercicio, aprenderemos a pintar y borrar cuadrados creando un efecto mosaico de entrada a la web. Pintaremos un cuadrado negro semitransparente que ocupe toda la pantalla luego iremos borrando cuadrados de izquierda a derecha verticalmente. La variable ancho sirve para definir el ancho del cuadrado a borrar y la variable margen, define la separacion entre cuadrados, con velocidadborrado, podeis ajustar la velocidad de la animación. Todo el código lo tenéis en HEAD y está documentado cada paso que se realiza.

Seguimos borrando y pintando cuadrados para crear un efecto mosaico al gargar la página. Pintaremos un cuadrado blanco que ocupe toda la pantalla luego iremos borrando cuadrados aleatoriamente, para ello, almacenaremos en un array las cordenadas de todos los cuadrados a borrar y luego la ordenaremos aleatoriamente. La variable ancho sirve para definir el ancho del cuadrado a borrar y la variable margen, define la separacion entre cuadrados, con velocidadborrado, podeis ajustar la velocidad de la animación. Todo el código lo tenéis en HEAD y está documentado cada paso que se realiza.

Utilizaremos lo aprendido para crear un visor rectangular. Pintaremos un cuadrado negro con algo de transparencia que ocupe toda la pantalla luego borraremos un rectangulo al paso del cursor o del dedo en los moviles. Para ello, deberemos saber objeter las cordenadas del cursor o del dedo manejando los eventos onmousemove y touchmove. La variable ancho sirve para definir el ancho del visor en % sobre el ancho del navegador, el visor tendrá la mitad de alto que de ancho. Todo el código lo tenéis en HEAD y está documentado cada paso que se realiza.

Con este ejercicio, repasaremos lo aprendido hasta ahora. Utilizaremos el mosaico del ejercicio 2 con el visor del ejercicio 3, de tal manera que a la vez que se genera el mosaico, podremos borrar otras secciones con el cursor. A diferencia del visor, en este caso no restauraremos el fondo antes de borrar la sección por la que pasa el cursor. El ancho del borrador es el % sobre el ancho de body. Todo el código lo tenéis en HEAD y está documentado cada paso que se realiza.

Este caso es radicalmente distinto al visor rectangular ya que no existe ningún comando para borrar zonas circulares del lienzo. Para borrar un círculo deberemos crear una sección de recorte circular (parecido a cómo hacemos en Photoshop), y posteriormente borraremos todo el lienzo, obviamente sólo se borrará la sección de recorte seleccionada, consiguiendo un círculo transparente. Seguiremos los siguientes pasos siguientes pasos, al paso del cursos:

• Reiniciaremos canvas, pare ello bastará con redefinir su alto y ancho
• Pintaremos un rectangulo relleno de negro con algo de transparencia que ocupe todo el lienzo.
• Definiremos un circulo al paso del cursor con el metodo .arc()
• Definiremos una seccion de recorte con el metodo .clip()
• Borraremos todo el lienzo (pero únicamente se borrará la sección de recorte.

La variable ancho sirve para definir el diametro del visor en % sobre el ancho del navegador. Todo el código lo tenéis en HEAD y está documentado cada paso que se realiza.

En este ejercicio, con un poco de humor, vamos a aprender:

• Crear regiones de recorte formadas por varias figuras (el visor está formado por un circulo y dos rectangulos).
• Pintar círculos.
• Pintar imagenes en el lienzo.
• Realizar una pequeña animación con la imagenes.
• Reproducir sonidos.

La variable ancho sirve para definir el diametro del visor en % sobre el ancho del navegador. Todo el código lo tenéis en HEAD y está documentado cada paso que se realiza.

En este ejercicio vamos a utilizar lo aprendido hasta ahora para crear una pizara responsive:

Para crear un CANVAS responsive, seguiremos los siguientes pasos:

• Le aplicaremos una regla CSS que determine su ancho, posteriormente lo podremos modificar con @media.
• Al cargar la página (window.onload=funcion() {...};) asignaremos a los atributos width y height de CANVAS los valores que correspondan con respecto al ancho que tenga la página, en PX, al cambiar el ancho de CANVAS, el navegador recalculará el alto automáticamente.
• Es recomendable, que en el CSS, definamos el ancho de CANVAS con un % para que se recalcule de modo automático.
• Si mediante Javascript modificamos en cualquier momento el atributo ancho o alto de CANVAS, este se reinicializará y perderá todo su contenido.
• Tendremos en cuenta al calcular coordenadas, que en PC habra que sumar a la coordenada Y el posible scroll del navegador, no así en móviles
• Al cambiar el ancho del navegador, CANVAS se recalculará su tamaño en pantalla, pero cara a la programación, tendrá siempre el tamaño que le asignamos en window.onload, por lo tanto deveremos calcular la posible desviación producida por un posible cambio del tamaño del navegador de las cordenadas X e Y.

Todo el código lo tenéis en HEAD y está documentado cada paso que se realiza.