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 .
<!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>
Puedes consultar aquí las soluciones propuestas, primero intenta resolverlo sin ayuda.
Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.