CANVAS (dibujar líneas)

Para dibujar líneas disponemos de una serie de métodos que debemos llamar en un orden predeterminado.

El algoritmo para dibujar dos líneas que formen una letra "V" es:

<!DOCTYPE HTML>
<head>
  <title>Título de la página</title>  
  <meta charset="UTF-8">

<script type="text/javascript">

function retornarLienzo(x)
{
   var canvas = document.getElementById(x);
   if (canvas.getContext) 
   {
     var lienzo = canvas.getContext("2d");   
     return lienzo;
   }
   else
     return false;
}

function dibujar()
{
   var lienzo=retornarLienzo("lienzo1");
   if (lienzo)
   { 
     lienzo.strokeStyle = "rgb(200,0,0)";
    //Inicio de camino
    lienzo.beginPath();
    lienzo.moveTo(0,0);
    lienzo.lineTo(150,300);
    lienzo.lineTo(300,0);
    //Trazar linea
    lienzo.stroke();
   }
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

El resultado en el navegador al cargar esta página es:

Inicializamos la propiedad que fija el color de la línea:

     lienzo.strokeStyle = "rgb(200,0,0)";

Llamamos al método beginPath para indicar que comenzamos a dibujar la/s línea/s:

    lienzo.beginPath();

Movemos el puntero gráfico a la coordenada donde comenzará a dibujarse llamando al método moveTo:

    lienzo.moveTo(0,0);

A través del método lineTo trazamos una línea desde donde se encuentra el puntero gráfico hasta la coordenada indicada mediante parámetros:

    lienzo.lineTo(150,300);

Trazamos una segunda línea desde donde finalizó la anterior hasta la nueva coordenada:

    lienzo.lineTo(300,0);

Para que se hagan efectivas todas la líneas trazadas hasta el momento debemos llamar al método stroke:

    lienzo.stroke();

El puntero gráfico se desplaza cada vez que llamamos al método lineTo.

Temario del Tutorial->4 - CANVAS (dibujar líneas)

Retornar