Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Canvas desde cero: Dibujo avanzado

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Canvas From Scratch.
Canvas From Scratch: Introducing Canvas
Canvas From Scratch: Transformations and Gradients

Spanish (Español) translation by Steven (you can also view the original English article)

En el artículo anterior de esta serie, aprendiste sobre el elemento canvas y los conceptos básicos para dibujar en él. En este artículo, voy a demostrar algunas de las funciones de dibujo más avanzadas.


Configuración

Usaremos la misma plantilla HTML del artículo anterior; así que abre tu editor favorito y pega el siguiente código:

Esto no es más que una página HTML básica con un elemento canvas y algo de JavaScript que se ejecuta después de que se haya cargado el DOM. Nada raro.


Dibujando círculos

En el último artículo te mostré cómo dibujar formas y trazos básicos; en esta sección te mostraré cómo llevar las cosas un paso más allá y dibujar círculos. No es tan fácil como podrías pensar, pero tampoco es nada difícil.

No existe un método en canvas que te permita dibujar un círculo con una sola línea de código, así como funciona fillRect para rectángulos. En su lugar, debes dibujar círculos con un trazo usando el método arc; un círculo es simplemente un arco de 360 grados. La razón de esto es que los círculos son en realidad formas muy complejas, y el método arc permite todo tipo de control sobre la forma en que los dibujas. Por ejemplo, es posible que desees dibujar solo un semicírculo. El método arc te permite hacer eso. Incluso puedes combinar el método arc con trazados rectos estándar para dibujar porciones de pizza y cuartos de círculo.

Explicaré cómo funciona el método arc en breve, pero por ahora, dibujemos un círculo agregando el siguiente código debajo de la variable ctx:

Esto dibujará un círculo ubicado ligeramente lejos de la parte superior izquierda del lienzo:

Parece simple, ¿verdad? Y lo es, pero echemos un vistazo más de cerca a lo que está pasando.

El método arc tiene un total de seis argumentos:

  • La primera es la posición x del punto de origen (el centro del círculo).
  • La segunda es la posición y del punto de origen.
  • El tercero es el radio del círculo.
  • El cuarto es el ángulo inicial del círculo.
  • El quinto es el ángulo final del círculo.
  • Y sexto es la dirección para dibujar el arco (true es en sentido antihorario, y false es en el sentido de las agujas del reloj)

Escrito en pseudocódigo, arc se vería así:

Los tres primeros argumentos son autoexplicativos, como es el último, pero ¿qué pasa con el ángulo inicial y final? Déjame explicarte.

Como mencioné anteriormente, los círculos son sólo arcos de 360 grados. En el lienzo, un arco se define como una línea curva que comienza a una distancia de un punto de origen que es la distancia del radio. La línea curva comienza en el ángulo definido como el argumento del ángulo inicial (el cuarto) y continúa alrededor de la circunferencia de un círculo imaginario hasta que alcanza el ángulo definido como el argumento del ángulo final (el quinto). Suena simple, ¿verdad?

Quizás una ilustración ayude a explicar la situación:

Puede parecer una locura, pero tiene mucho sentido una vez que eres capaz de entenderlo.

Angulos en canvas

En este punto, probablemente valga la pena mencionar que los ángulos en el lienzo se hacen en radianes, no en grados. Esto significa que los ángulos van de 0 a pi multiplicado por dos. Los ángulos en el lienzo también comienzan desde el lado derecho, como se puede ver en la siguiente ilustración:

Si realmente no te gustan los radianes, puedes convertir fácilmente los grados en radianes con la siguiente fórmula de JavaScript:

Esta fórmula es muy simple y es extremadamente valiosa si deseas tratar con grados.


Trazos de Bézier

Los arcos son divertidos y todo, pero son bastante limitantes para el tipo de curvas que se pueden crear con el lienzo. Para algo más complejo, querrás comenzar a mirar los métodos de curva de Bézier quadraticCurveTo y bezierCurveTo. Estos métodos te permiten crear trayectorias curvas que tienen un radio que no es central a la curva, y también crear trayectorias que tienen múltiples curvas.

Los trazados de Bézier utilizan puntos de control para definir cómo y dónde dibujar las curvas. Por ejemplo, quadraticCurveTo tiene un punto de control, mientras que bezierCurveTo tiene dos. Consulta la siguiente ilustración para ver cómo los puntos de control afectan la forma en que se dibuja una curva:

Si has utilizado una aplicación de dibujo basado en vectores como Adobe Illustrator anteriormente, es posible que ya te sientas cómodo con este tipo de curvas.

Saltemos y creemos un trazado Bézier cuadrático. Reemplaza el código de arco con lo siguiente:

Esto dibujará un camino curvo que se parece al de la izquierda de la ilustración de arriba:

El método quadraticCurveTo toma cuatro argumentos:

  • La primera es la posición x del punto de control.
  • La segunda es la posición y del punto de control.
  • La tercera es la posición x del final del trazo.
  • Y la cuarta es la posición y del final del trazo.

Escrita en pseudocódigo, quadraticCurveTo se vería así:

La posición inicial de la curva es donde se encuentra el trazo actualmente. Por ejemplo, en el código anterior, moviste el inicio del trazo llamando al método moveTo.

Subamos un nivel y creemos un trazo de Bézier cúbico. Reemplaza el código anterior con lo siguiente:

Esto dibujará un trazo curvo que se parece al de la derecha de la ilustración de arriba:

El método bezierCurveTo toma seis argumentos:

  • La primera es la posición x del primer punto de control.
  • El segundo es la posición y del primer punto de control.
  • El tercero es la posición x del segundo punto de control.
  • La cuarta es la posición y del segundo punto de control.
  • La quinta es la posición x del final del trazo.
  • Y la sexta es la posición y del final del trazo.

Escrito es pseudocódigo, bezierCurveTo se vería así:

Por sí solos, los trazos de Bézier no son muy sorprendentes, pero cuando se combinan con trazos normales, o cuando se usan varias veces, los resultados pueden ser bastante profundos. ¡Te permiten crear todo tipo de formas complicadas y locas en canvas!

Es posible que desees consultar el complemento para Adobe Illustrator Ai->Canvas plugin que te permite exportar tu elegante dibujo vectorial como código de canvas. ¡Es bastante elegante y te ahorrará mucho tiempo!


Estado del dibujo

En el artículo anterior de esta serie, detallé cómo cambiar el estilo de relleno y trazo de canvas, también hablé sobre cómo cambiar el ancho de una línea. Uno de los problemas que debes tener en cuenta al cambiar estas propiedades es que tendrás que volver a cambiar manualmente los colores y el ancho de línea si deseas el color o el ancho que tenías originalmente. Afortunadamente, como siempre, hay una mejor manera de hacer esto; se llama estado de dibujo.

El estado de dibujo en canvas es esencialmente una pila en la que puedes guardar los estilos actuales y luego restaurarlos nuevamente en una fecha posterior.

Es un concepto engañosamente simple, pero que te permite hacer muchas cosas cuando lo entiendes por completo. De hecho, el estado de dibujo contiene una gran cantidad de información visual sobre el lienzo, como la matriz de transformación, la región de recorte y las siguientes propiedades; globalAlpha, globalCompositeOperation, strokeStyle, fillStyle, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign y textBaseline. La mayoría de estos serán nuevos para ti, así que no te preocupes. Aprenderás sobre transformaciones y otras cosas divertidas como sombras en el próximo artículo.

Guardar el estado del dibujo

Usar el estado de dibujo es muy simple, pero comprenderlo completamente puede llevar un poco de tiempo. Reemplaza el código de la última sección con lo siguiente:

Eso es realmente todo lo que necesitas para guardar el estado del dibujo: una sola llamada al método save. ¡Te dije que era sencillo!

Lo que está sucediendo aquí es que estás cambiando el estilo de relleno de canvas a azul, luego guardando el estado de dibujo, lo que empuja el estado actual a la pila de la que estaba hablando antes. De forma predeterminada, la pila de estados de dibujo está vacía.

Es importante recordar que la pila funciona como una pila de papel en tu escritorio; el primer elemento de la pila está en la parte inferior, y el elemento más nuevo en la parte superior. Si deseas volver al primer elemento, primero debes quitar todos los elementos que están encima. Esto se conoce como sistema primero en entrar, último en salir, o último en entrar, primero en salir si quieres verlo al revés.

Restauración del estado del dibujo

Guardar el estado del dibujo es genial y todo, pero usarlo de nuevo es un poco más útil. Para hacer eso, usarás el método restore.

Agrega el siguiente código al código anterior:

Esto dibujará otro rectángulo en el lienzo, pero esta vez en un color diferente (rojo):

Todas las cosas son bastante estándar hasta ahora, pero ¿qué pasa si quieres volver al color azul y dibujar otro rectángulo? Bueno, podrías configurar el estilo de relleno manualmente como azul, pero eso sería aburrido. Intentemos usar el método restore y ver qué sucede.

Agrega el siguiente código:

Esto dibujará otro rectángulo, pero esta vez con el estilo de relleno original:

¿Qué tan fácil fue eso? La llamada a restore sacó y eliminó el último estado de dibujo que se agregó a la pila, y luego lo aplicó al lienzo, lo que te ahorró mucho tiempo. Bien, es posible que no te hayas ahorrado una gran cantidad de tiempo en este ejemplo, pero habrías cambiado todo tipo de propiedades y realizado transformaciones en el lienzo.

Usar varios estados de dibujo

Entonces, sabes cómo usar el estado de dibujo para una sola ocurrencia, pero ¿qué sucede si guardas varios estados de dibujo? Para los de ojos agudos, quizás recuerden que me refería a la pila como una pila de papel; último en entrar primero en salir. Veamos cómo funciona esto en el código.

Actualiza el código anterior para guardar el estado del dibujo después de configurar el estilo de relleno en rojo:

Aunque este es prácticamente el mismo código que antes, todo habrá cambiado ya que el último estado de dibujo agregado a la pila contiene el estilo de relleno rojo:

Para restaurar el primer estado (el estilo de relleno azul), deberás llamar a restore por segunda vez, así que agrega el siguiente código:

Esto extraerá y eliminará el primer estado de la pila y lo aplicará al lienzo, lo que te dará un estilo de relleno azul:

Al usar varios estados de dibujo como este, puedes ahorrar mucho tiempo. ¡Es bastante ingenioso!


Finalizando

Espero no haber pasado demasiado rápido por todo esto. Algunos de los conceptos que hemos cubierto son bastante avanzados, y te animo a volver a leer el artículo y jugar con el código para comprender mejor lo que está sucediendo.

En el próximo artículo, aprenderás a realizar transformaciones en canvas, así como a utilizar sombras y degradados. ¡Tiempos emocionantes!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.