Formas en Canvas 2D: Rectángulos, Líneas, Arcos y Curvas

Introducción a las Formas

Canvas ofrece múltiples métodos para dibujar formas, desde rectángulos simples hasta curvas Bézier complejas. Las formas se crean mediante trazados (paths), que son secuencias de puntos conectados por líneas o curvas. Entender cómo funcionan los trazados es fundamental para crear gráficos vectoriales de cualquier complejidad.

El proceso de dibujo de formas generalmente sigue este patrón: primero defines el trazado usando métodos como moveTo(), lineTo(), arc(), o curvas Bézier, luego aplicas estilos (colores, grosores), y finalmente renderizas el trazado con fill() o stroke(). Este enfoque te da control total sobre cada aspecto de la forma.

Rectángulos

Los rectángulos son las formas más simples en Canvas y tienen métodos dedicados para dibujarlos rápidamente. fillRect() dibuja un rectángulo relleno, strokeRect() dibuja solo el contorno, y clearRect() borra un área rectangular haciendo los píxeles transparentes.

Este ejemplo muestra los tres métodos de rectángulos. fillRect() usa el color actual de fillStyle, strokeRect() usa strokeStyle y lineWidth, y clearRect() hace los píxeles transparentes, revelando el fondo del elemento canvas o lo que haya detrás. Estos métodos son optimizados internamente por Canvas, haciéndolos más rápidos que dibujar rectángulos mediante trazados.

Trazados (Paths)

Los trazados son la forma principal de dibujar formas complejas en Canvas. Un trazado es una colección de subtrazados, donde cada subtrazado es una secuencia de puntos conectados. Para crear un trazado, usas beginPath() para iniciar uno nuevo, luego defines los puntos con métodos como moveTo(), lineTo(), arc(), y finalmente renderizas con fill() o stroke().

Es crucial llamar a beginPath() antes de crear un nuevo trazado. Sin esto, los nuevos puntos se conectarán al trazado anterior, creando formas no deseadas. Este es uno de los errores más comunes al trabajar con Canvas.

Este ejemplo muestra cómo crear trazados separados. Cada beginPath() inicia un trazado independiente, evitando que las líneas se conecten entre sí. Observa cómo moveTo() mueve el "lápiz" sin dibujar, mientras que lineTo() dibuja una línea desde la posición actual hasta el nuevo punto.

• <strong>beginPath()</strong> - Inicia un nuevo trazado, desconectando del anterior
• <strong>moveTo(x, y)</strong> - Mueve el punto inicial sin dibujar
• <strong>lineTo(x, y)</strong> - Dibuja una línea desde el punto actual
• <strong>closePath()</strong> - Cierra el trazado conectando al inicio
• <strong>fill()</strong> - Rellena el trazado con fillStyle
• <strong>stroke()</strong> - Dibuja el contorno con strokeStyle

Líneas

Las líneas son el componente básico de los trazados. Puedes controlar el estilo de las líneas mediante propiedades como lineWidth (grosor), lineCap (terminación de línea) y lineJoin (unión de líneas). Estas propiedades te permiten crear desde líneas finas y precisas hasta líneas gruesas y artísticas.

Este ejemplo demuestra los diferentes estilos de línea. lineCap controla cómo se dibujan los extremos: 'butt' (cuadrado), 'round' (redondeado) o 'square' (cuadrado extendido). lineJoin controla cómo se unen las esquinas: 'miter' (puntiaguda), 'round' (redondeada) o 'bevel' (biselada).

Arcos y Círculos

Los arcos y círculos se dibujan usando el método arc(), que crea un arco circular especificando el centro, radio, ángulo inicial y ángulo final. Los ángulos se expresan en radianes, no en grados, por lo que necesitas convertir si trabajas con grados.

Para dibujar un círculo completo, especifica un ángulo inicial de 0 y un ángulo final de 2π (Math.PI * 2). Para un semicírculo, usa π (Math.PI). También puedes usar arcTo() para crear arcos que se conectan suavemente a dos puntos con un radio de curvatura específico.

Este ejemplo muestra cómo dibujar círculos y arcos. El primer es un círculo completo, el segundo un semicírculo, y el tercero un arco parcial. El parámetro booleano (true/false) determina si el arco se dibuja en sentido horario (false) o antihorario (true).

Curvas Bézier

Las curvas Bézier son curvas paramétricas que te permiten crear formas suaves y orgánicas. Canvas soporta dos tipos: curvas cuadráticas (quadraticCurveTo) con un punto de control, y curvas cúbicas (bezierCurveTo) con dos puntos de control. Las curvas cúbicas son más flexibles y permiten crear formas más complejas.

Los puntos de control determinan la forma de la curva. Una curva cuadrática usa un punto de control que "tira" de la curva hacia sí, mientras que una curva cúbica usa dos puntos de control para crear formas más complejas como letras o siluetas orgánicas.

Este ejemplo muestra ambos tipos de curvas Bézier. La curva cuadrática usa un punto de control (cp1x, cp1y), mientras que la curva cúbica usa dos puntos de control (cp1x, cp1y) y (cp2x, cp2y). Los puntos de control se dibujan en rojo para visualizar cómo afectan la forma de la curva.

• <strong>quadraticCurveTo(cp1x, cp1y, x, y)</strong> - Curva con 1 punto de control
• <strong>bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</strong> - Curva con 2 puntos de control
• Los puntos de control determinan la <strong>curvatura</strong> de la línea
• Las curvas cúbicas son más <strong>flexibles</strong> para formas complejas
• Útiles para dibujar <strong>letras</strong>, iconos y formas orgánicas