Crear un Path sobre un Canvas de HTML5

30/Jul/2012 HTML5 , , , 1 Comentario

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.

  1. <canvas height="300px" width="300px" id="micanvas">
  2. Su navegador no soporta en elemento CANVAS</canvas>
  3.  
  4. <script>var canvas = document.getElementById("micanvas");
  5. var ctx = canvas.getContext("2d");</script>

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

  1. 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:

  1. ctx.moveTo(0,0);
  2. ctx.lineTo(100,100);
  3. 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().

  1. ctx.strokeStyle = "#f00";
  2. 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.

Un comentario en “Crear un Path sobre un Canvas de HTML5”

Víctor Cuervo

nayi

es muy interesante programar de esta manera, me encanta, haber cuando aprendo

Responder a nayi Cancelar respuesta

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*