Ejercicios unidad 15: Introducción a los gráficos Canvas

En este ejercicio practicaremos con los gráficos Canvas. Para realizar este ejercicio utilizaremos el archivo canvas_propuesto_ini.html que puedes descargarte de la carpeta ejercicios/unidad-15/canvas_propuesto_ini.html (o copiar el código que hay a continuación) y guardarlo en la carpeta de ejercicios/unidad15 .

Ejercicio 1: Gráficos Canvas.

Para practicar creando gráficos Canvas te proponemos realizar un gráficos como el que ves a continuación y que también está disponible en este enlace: canvas_propuesto_fin.htm

Puedes comenzar el ejercicio a partir del archivo canvas_propuesto_ini.html que crea un lienzo Canvas de 550 x 350, dibuja el contorno de un rectángulo con esas medidas para que te sirva de referencia, una vez acabado el ejercicio puedes borrar este rectángulo.

<!doctype html>
    <html lang="es">
    <head>
<title>Propuesto  Canvas </title>
<script type="text/javascript">
function dibujarCanvas(){
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
contexto.strokeRect (0, 0, 550, 350);
// gradiente lineal vertical  para el cielo
// gradiente lineal vertical  para el suelo
// gradiente lineal vertical  para las montañas
// trazado para montañas
// degradado radial para la nube 
// dibujar lluvia
// texto 
}
</script>
</head>
<body onLoad="dibujarCanvas();">
<canvas id="miCanvas" width="550" height="350">Su navegador no soporta Canvas.</canvas>
</body>
</html>

Hay distintas formas de resolver este ejercicio, para comprobar la solución te aconsejamos que los hagas como nosotros, siguiendo los pasos que hemos escrito como comentarios de la manera siguiente: Un gradiente para el cielo que daremos como fondo de un rectángulo. Un gradiente para el suelo que daremos como fondo de un rectángulo. Un gradiente para las montañas el cielo que daremos como fondo de un trazado. Un gradiente radial para la nube que dibujaremos como un trazado con curvas Bezier.
Para dibujar las gotas de lluvia podemos utilizar dos bucles "for" anidados, el interior dibujará n gotas y el exterior dibujará m filas. Cada gota será un trazado compuesto por una línea. Para el texto hemos utilizado las fuentes Verdana y Arial.

Puedes consultar aquí las soluciones propuestas, primero intenta resolverlo sin ayuda.

Enero-2019 (V 2.0)

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies