Temario del Tutorial->9 - CANVAS (dibujar varias líneas y rellenar la figura creada)


Cuando creamos una serie de segmentos podemos como hemos visto pintar su perímetro. Pero además podemos llenar su interior con un color.

Confeccionaremos un programa que muestre un triángulo con su interior coloreado:

<!DOCTYPE HTML>
<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.fillStyle="rgb(255,0,0)";
    lienzo.strokeStyle="rgb(0,0,255)";
    lienzo.lineWidth=5;
    lienzo.beginPath();
    lienzo.moveTo(150,10);
    lienzo.lineTo(10,290);
    lienzo.lineTo(290,290);
    lienzo.lineTo(150,10);
    lienzo.fill();
    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:

canvas rellenar región

Inicializamos el color de relleno de la figura:

    lienzo.fillStyle="rgb(255,0,0)";

Inicializamos el color del borde de la figura:

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

Fijamos el ancho de la línea:

    lienzo.lineWidth=5;

Indicamos que comenzamos la figura:

    lienzo.beginPath();

Movemos el puntero gráfico al primer vértice de nuestro triángulo:

    lienzo.moveTo(150,10);

Trazamos el primer segmento:

    lienzo.lineTo(10,290);

Trazamos el segundo segmento:

    lienzo.lineTo(290,290);

Trazamos el último segmento (que coincide con el punto inicial):

    lienzo.lineTo(150,10);

Confirmamos que finalizamos la figura y se proceda a rellenar la figura:

    lienzo.fill();

Confirmamos que dibuje el perímetro de la figura:

    lienzo.stroke();

Tengamos en cuenta que si el punto final no coincide con el punto de origen el método fill traza este último segmento.

Retornar