Artículos
HTML5

Crear un Path sobre un Canvas de HTML5

30/Jul/2012

Un Path es un conjunto de movimientos o dibujos que realicemos dentro de un Canvas de HTML5. De esta manera, mediante código podemos trazar los dibujos y al final del Path decidir cómo los vamos a pintar o volcar sobre el Canvas. Este es el punto importante, lo especificado dentro de un Path solo se vuelca cuando demos por terminado el Path.

Siempre que estemos trabajando con un Canvas lo primero que haremos será crear el elemento Canvas de HTML5 y posteriormente obtener su referencia y contexto mediante Javascript.


Su navegador no soporta en elemento CANVAS 

Para crear un Path lo primero que tendremos que hacer es utilizar el método .beginPath() el cual indica el principio del Path.

ctx.beginPath();

Una vez creado el Path podremos hacer movimientos sobre el Canvas con .moveTo(), podremos dibujar líneas con .lineTo(), arcos mediante .arc(),… Por ejemplo podríamos tener el siguiente código:

ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.arc(150,100,100,(Math.PI/180)*180,0,true);

Lo siguiente será definir el color con el cual hemos realizado los movimientos sobre el Canvas. Para esto tenemos la propiedad .strokeStyle. Y lo último el ejecutar el dibujado del contenido sobre el Canvas. Esto lo conseguimos mediante el método .stroke().

ctx.strokeStyle = "#f00";
ctx.stroke();

Con estos tres sencillos pasos: inicio del Path, .beginPath(), realización de movimientos y volcado de contenido, .stroke() tenemos creado un Path sobre el Canvas en HTML5.

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
1 Comentario
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios