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.

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

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>

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.
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.
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.
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.
Por último dibujamos el texto "Canvas" de color amarillo y fuente Verdana, y el texto "aulaClic" de borde blanco y fuente Arial.
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.

Enero-2019 (V 2.0)

Cursos Informática Gratuitos

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