Aparte de las formas básicas que acabamos de ver, se pueden realizar dibujos más complejos utilizando el elemento path (trazado, camino o ruta). El elemento path permite definir el contorno de una forma o dibujo que puede estar relleno o no, y tener un grosor de contorno determinado, exactamente igual que las formas básicas que acabamos de ver. Pero. además. un path puede usarse como trazado de recorte, para describir el movimiento de una animación o para contener la alineación de un texto. Estas últimas funcionalidades las veremos después de ver cómo crear trazados usando el elemento path.
Podemos describir un trazado como un lápiz que partiendo de un punto inicial va realizando el dibujo mediante órdenes de tres tipos, lineto para dibujar una recta, curveto para dibujar una curva, arc para dibujar un arco, además disponemos de los comandos moveto, para iniciar un trazado y closepath para crear un trazado cerrado. Si los comandos se escriben en mayúsculas indican valores absolutos de las coordenadas y en minúsculas valores relativos.
El formato del elemento path es el siguiente:
<path d="conjunto de comandos" />
El conjunto de comandos está formado por los comandos moveto, lineto, curveto, arc y closepath, que vamos a ver a continuación. Se pueden separar los comandos por comas o espacios. Un primer ejemplo de un trazado sencillo, podría ser este compuesto por una curva y una recta:
<path d="M20,20 Q80,30,20,90 L60,90" />
El resultado es este:
moveto. M x y Inicia un trazado en el punto especificado (x,y). No dibuja nada, sólo es el punto de inicio del trazado.
lineto. L x y Dibuja una línea entre el punto actual y el punto especificado (x,y).
Ejemplo:
Podemos encadenar varios comandos L de forma compacta escribiendo un solo comando L y la secuencia de puntos, por ejemplo:
<path d="M10,40 L40,40 40,80 80,80 80,120 120,120 120,160 40,160" />
closepath. Z Cierra un trazado uniendo con una recta el punto donde escribimos el comando Z con en el punto inicial del trazado especificado por el anterior comando moveto.
Ejemplo:
<path d="M10,40 L40,40 40,80 80,80 80,120 120,120 120,160 40,160Z" />
lineto vertical. V y Dibuja una línea horizontal desde el punto actual al punto especificado (0,y).
lineto horizontal . H x Dibuja una línea horizontal desde el punto actual al punto especificado (x,0).
Ejemplo con valores relativos (v, h minúsculas):
<path d="M40,10 h40 v40 h40 v40 h40 v40" />
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.