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


Práctica 5.1. Introducción al canvas de HTML

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

Usando la librería vJcanvas, genera un canvas de prueba con círculos, rectángulos y cuadrados, de colores diversos. Procura que quede sencillo pero colorido. Usa bucles para repetir elementos.

Práctica FINAL 2. Patrones de camuflaje

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.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.

Usa los nombres de fichero siguientes: ~/dat/practica05/funcion_01.html, ~/dat/practica05/funcion_01.js, ~/dat/practica05/funcion_02.html y ~/dat/practica05/funcion_02.js.

Práctica 5.4. Escritura de texto en vJcanvas. OPTATIVA

Añade leyendas a las figuras del ejercicio anterior, 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. Ponle el nombre

~/dat/practica05/vjcanvas2.js

Práctica 5.5. Papel de regalo. OPTATIVA

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)