Unidad 15. Ejercicio: Gráficos Canvas

En este ejercicio practicaremos con los gráficos Canvas . Para realizar este ejercicio no es necesario descargar ningún archivo, vamos a crear un archivo nuevo.

Ejercicio 1: Gráficos Canvas.

Crea el archivo nuevo grafico_canvas.html y copiar el código que se muestra a continuación, puedes guardarlo en la carpeta de ejercicios/cursos-aulaclic:

<!doctype html>
<html lang="es">
  <head>
    <title>Ejemplo Canvas </title>
    <script type="text/javascript">
      function dibujarCanvas(){
        var canvas = document.getElementById('miCanvas');
        var contexto = canvas.getContext('2d');
           contexto.strokeRect (0, 0, 400, 250);
        }
    </script>
  </head>
  <body onLoad="dibujarCanvas();">
  <canvas id="miCanvas" width="400" height="250">Su navegador no soporta Canvas.</canvas>
  <p>Ejemplos Canvas</p>
  </body>
</html>

El resultado es el que muestra esta imagen:

También puedes verlo en esta página: ejemplo1,

Puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.

Este código es lo básico para empezar a trabajar con Canvas, en la teoría ya vimos con detalle el significado de cada instrucción. Resumiendo diremos que se crea el lienzo Canvas con unas dimensiones de 400 x 250, y se ejecuta la función de dibujo al cargar la página <body onLoad="dibujarCanvas();">. Con la propiedad contexto.strokeRect (0, 0, 400, 250); dibujamos el contorno de un rectángulo sin relleno que tiene las mismas dimensiones que el área de dibujo, así nos ayudará a ver dónde estamos dibujando.
A continuación vamos a dibujar el rectángulo azul que vemos en la siguiente imagen para entender bien el sistema de coordenadas de Canvas:
Definimos el color de relleno con contexto.fillStyle = '#5cb3fc'; y dibujamos un rectángulo con relleno con la esquina superior izquierda en las coordenadas (90,70) y un ancho de 150 y un alto de 100, con contexto.fillRect (90, 70, 150, 100); con lo cual la función de dibujo quedará así:
```
function dibujarCanvas(){
        var canvas = document.getElementById('miCanvas');
        var contexto = canvas.getContext('2d');
            contexto.strokeRect (0, 0, 400, 250);
            contexto.fillStyle =  '#5cb3fc';
            contexto.fillRect (90, 70, 150, 100);
        }
    </script>
```
El resultado es el que muestra esta imagen:

También puedes ver el resultado en esta página: ejemplo2.
Seguidamente vamos a crear un trazado sencillo, formado por dos líneas, para ello iniciamos el trazado con beginPath() y damos el punto inicial con moveTo(80,70), luego definimos una línea desde ese punto al punto (45,120), con lineTo(45,120); y otra línea hasta el punto siguiente con lineTo(80,170); con strokeStyle = 'red'; definimos el color rojo del trazado y con lineWidth = '4', damos la anchura de la línea, finalmente para dibujar el trazado sin relleno escribimos stroke(). A continuación vemos el código resultante:
```
contexto.beginPath();
contexto.moveTo(80,70);
contexto.lineTo(45,120);
contexto.lineTo(80,170);
contexto.strokeStyle =  'red';
contexto.lineWidth =  '4';
contexto.stroke();
```
El resultado es el que muestra esta imagen:

También puedes ver el resultado en esta página: ejemplo3.

A continuación vamos a dibujar un trazado con relleno utilizando la propiedad arc (arco). Primero definimos el color del relleno a verde con fillStyle = 'green'; a continuación dibujamos el arco con arc(250,120,50,radianes('270'),radianes('90')), donde 250,120 es el centro de la circunferencia que contiene al arco, el arco comienza en el ángulo 270 grados y acaba en los 90 grados en el sentido de las agujas del reloj. La propiedad arc admite los ángulos en radianes, para trabajar más cómodamente en grados utilizamos la función radianes(grados), que transforma grados en radianes. Aquí tienes el código completo:

<!doctype html>
<html lang="es">
  <head>
    <title>Ejemplo Canvas </title>
    <script type="text/javascript">
      function dibujarCanvas(){
        var canvas = document.getElementById('miCanvas');
        var contexto = canvas.getContext('2d');
            contexto.strokeRect (0, 0, 400, 250);
            contexto.fillStyle =  '#5cb3fc';
            contexto.fillRect (90, 70, 150,100);
           // b. Forma abierta sin  relleno
            contexto.beginPath();
            contexto.moveTo(80,70);
            contexto.lineTo(45,120);
            contexto.lineTo(80,170);
            contexto.strokeStyle =  'red';
            contexto.lineWidth =  '4';
            contexto.stroke();
           // b. arco cerrado con  relleno
            contexto.fillStyle =  'green';
            contexto.beginPath();
            contexto.arc(250,120,50,radianes('270'),radianes('90'));
            contexto.fill();
        }
        function radianes(grados){
		 var radianes = (Math.PI/180)*grados;
		 return radianes;
	}
    </script>
  </head>
  <body onLoad="dibujarCanvas();">
  <canvas id="miCanvas" width="400" height="250">Su navegador no soporta Canvas.</canvas>
  <p>Ejemplos  Canvas</p>
  </body>
</html>

El resultado es el que muestra esta imagen:

También puedes ver el resultado en esta página: ejemplo4.

Enero-2019 (V 2.2)

Cursos Informática Gratuitos

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