Tutorial HTML5 – Canvas: Dibujar formas o polígonos

Hoy os traemos un nuevo tutorial de HTML5.

Entre otras características, HTML5 destaca por el enorme potencial del nuevo elemento Canvas.

El elemento Canvas es un entorno para crear imágenes de forma dinámica. Para crear una sección o elemento de cambas basta con crear su etiqueta y definir una dimensión.

Si insertamos cualquier elemento entre las etiquetas del canvas, únicamente será visualizado por aquellos navegadores que no soportan el Canvas o HTML5.

Esto es útil ya que podemos definir un texto por defecto para los que no ven el canvas, a la vez que para los que sí, mostramos la imágen dinámica.

Todo el proceso de dibujado se hace en JavaScript. Lo único que necesitamos es recuperar el elemento Canvas y obtener su contexto.

El API 2D permite utilizar características que encontramos de normal en herramientas de diseño gráfico: líneas o trazos, rellenos, gradientes, formas, sombras, etc.

No obstante todo esto debe realizarse lógicamente por código. Es algo lento de crear hasta que vamos cogiendo habilidad.

Para este tutorial vamos a crear al completo el logo de Apprendemos.com que utilizamos en las webs o en twitter.

Tutorial Canvas HTML5 Crear formas y poligonos - apprendemos.com

Empezaremos creando el cuadrado azul sin redondear los bordes para que quede claro el uso. Después pasaremos a crearlo con los correspondientes bordes.

Una vez hecho, insertaremos una serie de formas, así como el texto necesario.

Y por último el efecto lúcido (gloss) típico de aplicaciones iOS.

Vamos a ello.

Creamos un documento HTML con la siguiente estructura en el body:

<body>
    <canvas id="polygons" width="300" height="300">
        <p>Su navegador no soporta HTML5</p>
        </canvas>
</body>

Como vemos hemos añadido el elemento dentro del. Este elemento es el encargado de mostrar lo que definamos mediante JavaScript.

Pasamos a añadir el evento OnLoad aly su correspondiente función JavaScript:

 <body onLoad="simpleCanvas();">
        <script type="application/x-javascript">
            function simpleCanvas() {
 
                /* Recuperamos el canvas */
                var canvas = document.getElementById("polygons");
 
                if (canvas.getContext) {
 
                    /* Obtenemos el contexto plano (2d) */
                    var ctx = canvas.getContext("2d");
 
                    /* Establecemos el valor RGB del primer polígono */
                    ctx.fillStyle = "rgb(41,155,243)";
 
                    /* Con fillRect crearemos un rectangulo los numeros correscponden:  */
                    /* los 2 primeros a las coordenadas y los otros tamaño (x,y,ancho,alto)  */
 
 
                    ctx.fillRect (10, 10, 180, 180);
 
 
                }
            }
        </script>
        <canvas id="polygons" width="300" height="300">
            <p>Su navegador no soporta HTML5</p>
        </canvas>
    </body>

Si probamos los resultados en el navegador podremos ver el cuadrado creado de color azul. Para probar que se muestra el mensaje en caso de no ser compatible, lo más fácil en probar con alguna versión de Internet Explorer, ya que será de las más fáciles en ser incompatible con cualquier cosa =p

Tutorial Canvas HTML5 Crear formas y poligonos - apprendemos.com

Una vez hemos visto el uso del FillRect(), la parte más fácil y común de Canvas, lo vamos a sustituir para crear el mismo fondo con sus bordes redondeados.

Para ello debemos parar a explicar las siguientes funciones de HTML5 de forma breve pero necesaria.

fill(); Sirve para dibujar el relleno del polígono que hemos definido.

stroke(); Sirve para dibujar el trazo del polígono definido.

fillStyle = “rgb(41,155,243)”; Define un color RGB para el dibujo.

fillStyle = “rgba(255, 255, 255, 1.0)”; Define un color RGB para el dibujo, pero con canal alfa, es decir, habilitando transparencia.

beginPath(); comienza un nuevo polígono, del que una vez definido, podremos dibujar el trazo (stroke) o el relleno (fill).

moveTo(x, y); Permite desplazar el punto desde el que se pinta, o se sigue pintando a a posición deseada.

lineTo(x, y); Dibuja una linea desde la posición actual hasta la indicada por x e y.

quadraticCurveTo(x_curva, y_curva, x_destino, y_destino); Permite crear una curva de Bézier. El origen de la curva, será el punto actual en el que nos encontremos.

El destino estará marcado por x_destino, y_destino. X_curva y Y_Curva será el punto hacía el que la linea se desvía realizando entonces la curva deseada.

Tutorial Canvas HTML5 Crear formas y poligonos - apprendemos.com

Una vez conocidas estas herramientas, pasaremos a utilizarlas para crear nuestro fondo:

 function simpleCanvas() {
       /* Recuperamos el canvas */
       var canvas = document.getElementById("polygons");
 
 
 
                if (canvas.getContext) {
                /* Obtenemos el contexto plano (2d) */
                var ctx = canvas.getContext("2d");
 
                /* Establecemos el valor RGB del primer polígono */
                ctx.fillStyle = "rgb(41,155,243)";
 
 
 
 
 
                    // Comenzamos un trazo
                    ctx.beginPath();
 
 
 
                    // Desplazamos el punto a la posición 10,10
                    ctx.moveTo(10, 10);
 
 
 
                    // Dibujamos una línea horizontal parando 25px antes de el vértice del cuadrado.
                    ctx.lineTo(165, 10);
 
 
 
                    // Aquí será donde empiece la superior derecha.
 
                    // Desde el punto anterior, definimos como primer parámetro de quadraticCurveto el vértice del cuadrado (hacia donde irá la curva de Bézier).
 
                    // Y como punto destino, el punto 25px por debajo del vértice.
 
                    ctx.quadraticCurveTo(190, 10, 190, 35);
 
 
 
                    // Repetimos el proceso. 
 
                    // Dibujamos una línea hasta 25px antes del vértice inferior derecha.
 
                    // Como vemos estamos dibujando el cuadrado en sentido de las agujas del reloj.
 
                    ctx.lineTo(190, 165);
 
                    // Dibujamos la siguiente curva.
 
                    ctx.quadraticCurveTo(190, 190, 165, 190);
 
 
 
                    // Y repetimos con los otros dos vértices:
 
                    ctx.lineTo(35, 190);
 
                    ctx.quadraticCurveTo(10, 190, 10, 165);
 
                    ctx.lineTo(10, 35);
 
                    ctx.quadraticCurveTo(10, 10, 35, 10);
 
 
 
                    // Por último pintamos el resultado
 
                    ctx.fill();
 
                }
 
            }

Probaremos en el navegador que el resultado es el deseado. Podemos ver el fondo azul redondeado.

Tutorial Canvas HTML5 Crear formas y poligonos - apprendemos.com

La función arc() se utiliza para crear arcos, es decir, circunferencias completas o incompletas (una tarta sin una porción^^).

Tutorial Canvas HTML5 Crear formas y poligonos - apprendemos.com

Por tanto, a continuación de “ctx.fill();” que acabamos de hacer, añadimos el siguiente fragmento para crear los 4 puntos blancos de arriba y abajo del logo.

 
                /* Damos color igual que en el anterios pero esta vez */
 
                    /*"rgba" añadiendo un numero más */
 
                    /*que en este caso serrá la transparencia */
 
                    ctx.fillStyle = "rgba(255, 255, 255, 1.0)";
 
 
 
                    // Superior primero
 
                    ctx.beginPath();
 
                    ctx.arc(110, 25, 5, 0, Math.PI*2, true);
 
                    ctx.fill();
 
 
 
                    // Superior segundo
 
                    ctx.beginPath();
 
                    ctx.arc(135, 25, 7, 0, Math.PI*2, true);
 
                    ctx.fill();
 
 
 
 
 
                    // Inferior primero
 
                    ctx.beginPath();
 
                    ctx.arc(65, 175, 7, 0, Math.PI*2, true);
 
                    ctx.fill();
 
 
 
                    // Inferior segundo
 
                    ctx.beginPath();
 
                    ctx.arc(90, 175, 5, 0, Math.PI*2, true);
 
                    ctx.fill();

Tutorial Canvas HTML5 Crear formas y poligonos - apprendemos.com

Ahora vamos a dibujar los polígonos en forma de L de las dos esquinas.

Aquí utilizaremos closePath() que lo que hará es unir el punto original coń el último añadido de forma que el polígono siempre cierre.

Esto no es necesario porque podemos poner el último punto igual que el primero, quedando también cerrado.

A continuación de lo anterior, ponemos lo siguiente:

                    ctx.beginPath();
 
                    ctx.moveTo(150, 19);
 
                    ctx.lineTo(150,31);
 
                    ctx.lineTo(170,31);
 
                    ctx.lineTo(170,54);
 
                    ctx.lineTo(182,54);
 
                    ctx.lineTo(182, 31);
 
                    ctx.lineTo(182, 19);
 
                    ctx.closePath();
 
                    ctx.fill();
 
 
 
 
 
                    ctx.beginPath();
 
                    ctx.moveTo(18, 150);
 
                    ctx.lineTo(30,150);
 
                    ctx.lineTo(30,169);
 
                    ctx.lineTo(51,169);
 
                    ctx.lineTo(51,181);
 
                    ctx.lineTo(18,181);
 
                    ctx.closePath();
 
                    ctx.fill();

Como vemos este punto también era facil.

Tutorial Canvas HTML5 Crear formas y poligonos - apprendemos.com

Ahora pondremos las letras “App” en el centro. Insertar texto también es muy facil. Seguido de lo anterior pondremos este fragmento:

 
                    // Definimos una fuente y un tamaño de letra.
 
                    ctx.font = '90px sans-serif';
 
 
 
                    // Podemos establecer la alineación base.
 
                    ctx.textBaseline = 'bottom';
 
 
 
                    // Y solo queda utilizar fillText para definir el texto a mostrar y la posición de origen.
 
                    ctx.fillText('App', 20, 140);

Tutorial Canvas HTML5 Crear formas y poligonos - apprendemos.com

El resultado ya empieza a parecerse bastante al logo de Apprendemos.com, pero todavía quedará añadir nuestro iPhone y el efecto gloss sobre el logo.

Comencemos por el efecto gloss que no afecta a toda la imagen, y por tanto, no importa si el iPhone lo insertamos después.

Si nos fijamos en la forma. La parte superior debe tener la misma forma que el fondo azul, es decir, utilizaremos sus curvas.

La parte inferior va a terminar antes y con una más pronunciada. En este caso en vez de hacerla con una diferencia de 25px,

la haremos directamente hasta el centro (95px) para que una curva termine donde empieza la otra, dándonos la impresión de ser una sola.

                    ctx.fillStyle = "rgba(180, 218, 246, 0.3)";
 
 
 
                    ctx.beginPath();
 
                    ctx.moveTo(10, 10);
 
                    ctx.lineTo(165, 10);
 
                    ctx.quadraticCurveTo(190, 10, 190, 35);
 
                    ctx.lineTo(190, 75);
 
                    ctx.quadraticCurveTo(190, 100, 100, 100);
 
                    ctx.lineTo(100, 100);
 
                    ctx.quadraticCurveTo(10, 100, 10, 75);
 
                    ctx.lineTo(10, 35);
 
                    ctx.quadraticCurveTo(10, 10, 35, 10);
 
                    ctx.fill();

Tutorial Canvas HTML5 Crear formas y poligonos - apprendemos.com

Y solo nos queda dibujar nuestro iPhone.

Comenzaremos por la capa inferior para ir superponiendo el resto.

Primero creamos la carcasa del iPhone:

 
                    //Carcasa iPhone
 
                    ctx.fillStyle = "rgba(0, 0, 0, 1.0)";
 
 
 
                    ctx.beginPath();
 
                    ctx.moveTo(110, 150);
 
                    ctx.lineTo(186, 150);
 
                    ctx.quadraticCurveTo(196, 150, 196, 160);
 
                    ctx.lineTo(196, 186);
 
                    ctx.quadraticCurveTo(196, 196, 186, 196);
 
                    ctx.lineTo(120, 196);
 
                    ctx.quadraticCurveTo(110, 196, 110, 186);
 
                    ctx.lineTo(110, 160);
 
                    ctx.quadraticCurveTo(110, 150, 120, 150);
 
                    ctx.fill();

Tutorial Canvas HTML5 Crear formas y poligonos - apprendemos.com

Después la pantalla:

                    // Pantalla iPhone
 
                    ctx.fillStyle = "rgb(41,155,243)";
 
                    ctx.fillRect (129, 158, 50, 30);

Tutorial Canvas HTML5 Crear formas y poligonos - apprendemos.com

Añadimos el botón, que hará de punto de “.com”:

                    // Botón iPhone
 
                    ctx.fillStyle = "rgba(255, 255, 255, 1.0)";
 
                    ctx.beginPath();
 
                    ctx.arc(120, 173.5, 4, 0, Math.PI*2, true);
 
                    ctx.fill();

Tutorial Canvas HTML5 Crear formas y poligonos - apprendemos.com

Y para terminar, el texto “com” final:

                    // Texto "com"
 
                    ctx.font = '22px sans-serif';
 
                    ctx.textBaseline = 'bottom';
 
                    ctx.fillText('com', 134, 183.7);

Si probamos el resultado en nuestro navegador deberíamos observar una imagen como esta:

Tutorial Canvas HTML5 Crear formas y poligonos - apprendemos.com

Esperamos que os haya gustado el tutorial de como crear formas y polígonos en Canvas de HTML5, y sobre todo, que os haya sido útil.

No olvideis ayudarnos con vuestro voto en Bitacoras.com Participamos en las categorías de Tecnología y Educación.

Sería un placer estar en las listas de clasificados. La motivación a seguir adelante con los tutoriales sería muy grande.

Como siempre, dudas y comentarios de bajo del tutorial.

Y mucho más en Twitter (@Apprendemos) y Facebook.

Saludos,

Manu =D

Author Image
Author: ManuAlamar iOS & .NET Developer. Ingeniero Técnico Informático especialmente interesado en proyectos relacionados con la tecnología móvil y web
  • Francisco

    Gracias por tu información, y tomarte el tiempo.
    Saludos.

  • Juan M

    Esto está muy bueno, me voy a poner a investigar cómo hacer lo que necesito para mi sitio. Gracias!

  • Pingback: Blog de dario - Animación con HTML5 y js()

  • Jhon

    Esta super , poco a poco logro entender cada metodo de CANVAS , se hace divertido cuando tienes las herramientas para dibujar

  • Pingback: Nuevas etiquetas HTML5 - Manejandodatos.es()