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

  1. 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
  2. La solución del ejercicio es el código que ves a continuación y que vamos a comentar en los puntos siguientes.
    <!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');
    // gradiente lineal vertical para el cielo
    var gradienteLineal = contexto.createLinearGradient(0,0,0,230);
    gradienteLineal.addColorStop(0.1, 'rgb(7, 118, 188)'); // azul
    gradienteLineal.addColorStop(0.6, 'rgb(203, 239, 245)'); // azul claro

    contexto.fillStyle = gradienteLineal;
    contexto.fillRect (0, 0, 550, 230);
    // gradiente lineal vertical para el suelo
    var gradienteLineal = contexto.createLinearGradient(0,230,0,350);
    gradienteLineal.addColorStop(0, 'rgb(5, 78, 5)'); // verde oscuro
    gradienteLineal.addColorStop(0.4, 'rgb(70, 163, 42)'); // verde claro
    gradienteLineal.addColorStop(0.9, 'white');
    contexto.fillStyle = gradienteLineal;
    contexto.fillRect (0, 230, 550, 120);
    // gradiente lineal vertical para las montañas
    var gradienteMonta = contexto.createLinearGradient(0,30,0,230);
    gradienteMonta.addColorStop(0, '#e38541'); // marrón claro
    gradienteMonta.addColorStop(0.6, '#69330b'); // marrón
    gradienteMonta.addColorStop(0.95, '#402204'); // marrón oscuro
    contexto.fillStyle = gradienteMonta;
    // trazado para montañas
    contexto.beginPath();
    contexto.moveTo(0,230);
    contexto.lineTo(80,90);
    contexto.lineTo(150,180);
    contexto.lineTo(250,70);
    contexto.lineTo(350,170);
    contexto.lineTo(450,30);
    contexto.lineTo(550,230);
    contexto.closePath();
    contexto.fill();
    // degradado radial para la nube
    var graRadial = contexto.createRadialGradient(360,120,80,360,120,10);
    graRadial.addColorStop(0, '#1d1179'); // azul oscuro
    graRadial.addColorStop(1, '#4c3cc7'); // azul
    contexto.fillStyle = graRadial;
    // nube con curvas bezier
    contexto.beginPath();
    contexto.moveTo(305,100);
    contexto.bezierCurveTo(335,65,390,65,425,100);
    contexto.bezierCurveTo(470,105,475,150,415,150);
    contexto.bezierCurveTo(395,185,330,185,295,150);
    contexto.bezierCurveTo(200,155,265,75,305,100);
    contexto.fill();
    // dibujar lluvia
    var x; // x
    var x_ini=250; // x
    var y=200; // y
    var despla=8; // desplazamiento gota en x
    var despla_fila=20; // desplazamiento de la fila en y
    var long=20; // longitud gota
    var gotas=8; // gotas por fila
    var filas=3; // filas de gotas
    contexto.lineWidth = 4; // ancho de línea
    contexto.fillStyle = '#99CC00'; // verde
    contexto.strokeStyle = 'rgb(1,64,224)'; // azul
    x=x_ini;
    for(var j=1;j<=filas;j++){
    for(var i=1;i<=gotas;i++){
    // comprobar que estamos dentro del lienzo
    if (x>=0 && x<=550 && y>=0 && y<=350) {
    contexto.beginPath();
    contexto.moveTo(x,y);
    contexto.lineTo(x=x+long,y=y+long);
    contexto.stroke();
    x=x+despla;
    y=y-long;
    }
    }
    y=y+despla_fila+long;
    x=x_ini;
    }
    // Texto
    contexto.fillStyle = 'yellow';
    contexto.font = "30px Verdana";
    contexto.fillText(" Canvas",10,50);
    contexto.strokeStyle = 'white';
    contexto.lineWidth = 1;
    contexto.font = "40px Arial";
    contexto.strokeText(" aulaClic",130,50);
    }
    </script>
    </head>
    <body onLoad="dibujarCanvas();">
    <canvas id="miCanvas" width="550" height="350">Su navegador no soporta Canvas.</canvas>
    </body>
    </html>
  3. Lo primero que hacemos es definir un gradiente lineal para el cielo, con createLinearGradient(0,0,0,230) definimos la dirección del gradiente desde el punto (0,0) al punto (0,230) con lo cual la dirección será vertical de arriba a abajo. Con addColorStop definimos los colores del gradiente, azul y azul claro, y los porcentajes que ocupará cada color la zona de degradado. Luego dibujamos el rectángulo fillRect (0, 0, 550, 230); que contiene el gradiente.
  4. De forma similar creamos el suelo verde de la imagen. Para dibujar las montañas creamos un trazado cerrado al que aplicamos otro gradiente de tonos marrones.
  5. Para la nube definimos un trazado radial donde los centros del gradiente están en el centro de la nube, el trazado lo realizamos con curvas de Bezier.
  6. Para dibujar las 24 gotas de lluvia hemos utilizado programación, así evitamos tener que dibujarlas una a una. El bucle "for" interior dibuja el trazado de i gotas, cada gota es un trazado compuesto por una línea . El bucle exterior "for" dibuja j filas.
  7. Por último dibujamos el texto "Canvas" de color amarillo y fuente Verdana, y el texto "aulaClic" de borde blanco y fuente Arial.
  8. Esta solución la puedes ver aquí: canvas_propuesto_fin.htm, también puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.

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


Enero-2019 (V 2.0)
Atrás Volver Adelante






Página inicial  Cursos Informática Gratuitos

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


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.