Prácticas de HTML Canvas
Desarrollo de Aplicaciones Telemáticas
Grado en Ingeniería en Tecnologías de la Telecomunicación, 2018-2019
Escuela Técnica Superior de Ingeniería de Telecomunicación
Universidad Rey Juan Carlos


Práctica 5.1. Patrones de camuflaje

En esta práctica empezarás a usar el canvas de HTML. Escribe los ficheros ~/dat/practica05/camuflaje.html y ~/dat/practica05/camuflaje.js acordes con la siguiente especificación:

Usando la libería vJcanvas, genera un canvas con diferentes patrones de camuflaje. Busca en google images patrones de camuflaje o camouflage patterns para hacerte una idea. No hace falta que sigas exactamente ningún patrón real. Puedes usar las figuras que quieras (círculos, rectángulos, elipses), de tamaños constantes o variables, repetidos a intervalos homegéneos o heterogéneos... tienes libertad. Lo único que no puedes hacer es un patrón donde todos los elementos sean iguales, del mismo tamaño y a intervalos regulares (como mosaico_04 ). En otras palabras, tienes que hacer patrones parecidos a mosaico_04 , pero algo más complejos.

Genera un único canvas, relativamente largo, con diferentes patrones repartidos en franjas horizontales. Por ejemplo, podrías generar 8 patrones: desierto01, desierto02, vegetal01, vegetal02, vegetal03, urbano01, urbano02 y marino01. Cada patrón podría ocupar una franja de 1000 pixeles de ancho por 500 pixeles de alto, en un canvas de 1000 pixeles de ancho por 4000 pixeles de alto. No importa si en las fronteras entre franjas se mezclan los patrones.

Sugerencia: deberías escribir una función para dibujar cada patrón en una franja. Esta función principal debería recibir, entre otros parámetros:

Práctica 5.2. Papel de regalo

Escribe en los ficheros ~/dat/practica05/regalo.html y ~/dat/practica05/regalo.js un script que genere un canvas con aspecto de papel de regalo. Aunque esta no es una asignatura de diseño gráfico, se valorará que el diseño quede relativamente bonito, vistoso. Tienes libertad para diseñarlo como quieras, con tal de que haya rotaciones, degradados de color, cambios de radio y figuras similares repetidas. En otras palabras, que mezcles estructuras como rotacion_degradado_01 (donde se repiten figuras similares), rotacion_degradado_02 (donde hay rotaciones y degradados) y rotacion_degradado_03 donde hay, además, cambios de radio (en este caso de un polígono)

Práctica 5.3. Funciones matemáticas

Genera dos canvas HTML, similares a parabola o seno que representen una o varias expresiones matemáticas que hayas utilizado en alguna otra asignatura. Añade leyendas, esto es, texto describiendo qué estamos viendo, qué hay en cada eje. La librería jcanvas incluye el manejo de texto, pero vjcanvas no, escribe una librería nueva que lo incluya.

Usa los nombres de fichero siguientes:

~/dat/practica05/vjcanvas2.js, ~/dat/practica05/funcion_01.html, ~/dat/practica05/funcion_01.js, ~/dat/practica05/funcion_02.html y ~/dat/practica05/funcion_02.js.