El canvas de HTML 5 (IV). Más sobre trazos.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

Hemos aprendido que en un canvas se pueden dibujar figuras “de contorno”, es decir, solamente el trazo, sin relleno. Sin embargo, apenas hemos aprendido los principios básicos. En este artículo vamos a ver que, siguiendo esos principios y con unos pocos conocimientos adicionales, podemos dibujar cualquier forma primitiva o, elaborando un poco más el tema, cualquier forma geométrica.

Este es un artículo con mucho contenido, pero muy fácil de entender y asimilar, como verás en seguida. Aprenderemos a hacer figuras geométricas, líneas con terminaciones e, incluso, texto. Adelante. Lee y disfruta.

PARA MUESTRA UN BOTÓN

Vamos a crear un canvas en el que vamos a incluir diversas figuras de trazo, para ver las posibilidades que, en este sentido, tenemos con estos elementos. El resultado será el que ves en la imagen a continuación:

Cómo puedes ver, hemos dibujado varias formas de trazo e, incluso, un texto al final. Veamos cómo hacerlo. El listado se llama canvas_008.htm:

OTRA FORMA DE HACER RECTÁNGULOS DE TRAZO

La primera figura que hemos dibujado es un rectángulo. Esta ya sabemos hacerla, aunque hay una forma “abreviada”, que vamos a conocer aquí. Observa la línea 26:

contexto_canvas_1.strokeRect(10, 10, 120, 130);

Los objetos de contexto cuentan con el método strokeRect(), cuya sintaxis es la misma que la de rect(). La diferencia es que, en lugar de definir el rectángulo, y luego tener que dibujarlo con stroke(), con este nuevo método hacemos las dos cosas en una sola instrucción. Es una pena que esto no esté disponible para otros métodos de dibujo. Quizá con el tiempo lo añadan.

DIBUJAR UN TRIÁNGULO

Un triángulo es una forma que no es posible dibujar con una instrucción específica. Por lo tanto, tenemos que buscarnos las vueltas. La solución es determinar las coordenadas de los tres vértices. A continuación nos ponemos en el primero y trazamos una línea hasta el segundo. Después, sin reinicializar la ruta, para mantener la posición, dibujamos una línea hasta el tercer vértice. Por último, trazamos una línea desde el tercero hasta el primero, para cerrar la figura. Una vez se comprende esto, es muy fácil, cómo ves en las líneas de la 30 a la 36:

Observa que el proceso es el mismo que ya conocemos: primero definimos las líneas y luego renderizamos la figura con stroke().

UNA ESTRELLA DE CINCO PUNTAS

Vamos a dibujar ahora una estrella de cinco puntas. Aparte de determinar las coordenadas de cada vértice (lo que ya, de por sí, es una tarea pesada), esto se parecería mucho al triángulo anterior, si no fuera porque queremos cada punta en un color. Por lo tanto, para cada punta debemos inicializar una ruta, y situar el cursor, con moveTo(), en las coordenadas donde acabó la punta anterior. Cada punta tiene dos trazos, como ves, y se debe renderizar de forma independiente, usando stroke() en cada una. Lo vemos en las líneas de la 38 a la 74:

TERMINACIONES DE LÍNEAS

Cuando dibujamos líneas rectas, si estas son muy finas (de 1 o 2 píxeles de grosor, por ejemplo), el aspecto de los extremos nos da un poco igual, porque, realmente, no se aprecia el detalle a simple vista. En líneas más gruesas, sin embargo, las terminaciones si podrían ser relevantes. El uso de canvas nos permite modificar los extremos de las líneas, mediante el valor de la propiedad lineCap. Esta puede recibir tres posibles valores:

  • butt. Es el valor por defecto. Indica que la línea no tendrá terminaciones específicas en los extremos.
  • round. Indica que los extremos serán redondeados.
  • square. Indica que los extremos serán cuadrados. El aspecto final es igual que no usar terminaciones, con la diferencia de que la línea queda, aparentemente, un poco más larga, por lo que ocupan los extremos.

Entre las líneas 85 y 97 puedes ver cómo hemos dibujado trazos con las tres terminaciones.

UN SECTOR DE CIRCUNFERENCIA

Ya sabemos como dibujar un arco de circunferencia. Ahora vamos a ver como dibujarlo, “acotado”, es decir, como vemos en la imagen, con dos trazos rectos que unen el centro de la circunferencia con cada uno de los extremos del arco. En realidad, esto no implica el uso de nada nuevo, sino de cosas que ya conocemos, como ves entre las líneas 99 y 107.

DIBUJAR PUNTOS SUELTOS

En la imagen ves que en el lienzo hay un punto. Le hemos dado bastante grosor, para que sea claramente visible, pero podríamos haberlo hecho mucho más fino. Para dibujar un punto, aparte de las instrucciones comunes para dibujar cualquier cosa, debemos seguir tres pasos específicos:

  • Establecer la terminación de línea en redondeado, como hemos visto más arriba.
  • Movernos a las coordenadas donde queremos dibujar el punto.
  • Trazar una “línea” a las mismas coordenadas.

Lo podemos ver entre las líneas 110 y 118 del listado.

TEXTO EN CONTORNO

El uso de canvas también nos permite dibujar texto contorneado, como vemos en la imagen. Aparte de las instrucciones típicas de cualquier otra forma, debemos hacer lo siguiente:

Establecer la tipografía y tamaño que vamos a emplear. Para ello usamos la propiedad font, como puedes ver en la línea 125.

Dibujar el texto, con el método strokeText(texto_a_mostrar, origen_X, origen_Y). Este método, como ves, recibe tres parámetros. El primero es el texto que vamos a mostrar, y los otros dos son las coordenadas X e Y donde el texto empezará a escribirse en el lienzo. Puedes verlo en la línea 126.

Cómo puedes ver, el texto también es una figura “hueca”.

CONCLUYENDO

En este artículo hemos aprendido mucho sobre el trazo de figuras huecas. En el próximo aprenderemos a crear formas sólidas. Como de costumbre, el código de este artículo te lo puedes descargar en este enlace.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *