Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


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>

<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>


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.









Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría HTML 5

  • Medallas
  • 0
    Favoritos
  • 9760
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados