En Canvas no hay funciones definidas para dibujar formas poligonales (salvo para el rectángulo), no existen funciones para dibujar triángulos, pentágonos, etc. La forma de trabajar con Canvas es dibujar "trazados" o "caminos" (paths).
Para construir un trazado lo primero es inicializarlo con la función beginPath(), luego se coloca el cursor en el punto de inicio con la función moveTo(x,y) y a partir de ahí se va creando el trazado con las distintas funciones existentes para dibujar líneas, arcos, etc. Una vez hemos acabado el trazado podemos usar dos funciones para dibujarlo realmente sobre el lienzo.
1. stroke() dibuja un trazado abierto o cerrado, sin color de relleno. Si nos preocupamos de hacer coincidir el último punto con el primero el trazado será cerrado, con lineWidth() se define el ancho de la línea del trazado.
2. fill() dibuja una forma cerrada con el color de relleno actual. Si el trazado estaba abierto, la propia función fill() crea una línea recta desde el último punto al punto inicial para cerrarlo, la propiedad fillStyle() define el color de relleno que por defecto es el negro.
También se puede usar la función closePath() que crea una línea recta desde el último punto al punto inicial.
Veamos un ejemplo de todo esto:
<!doctype html>
<html lang="es">
<head>
<title>Ejemplo2 Canvas </title>
<script type="text/javascript">
function dibujarCanvas(){
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
// a. Forma abierta
contexto.beginPath();
contexto.moveTo(50,50);
contexto.lineTo(50,150);
contexto.lineTo(150,150);
contexto.stroke();
// b. Forma cerrada con relleno
contexto.beginPath();
contexto.moveTo(200,50);
contexto.lineTo(200,150);
contexto.lineTo(300,150);
contexto.fill();
// c. Forma cerrada sin relleno
contexto.beginPath();
contexto.moveTo(50,200);
contexto.lineTo(50,300);
contexto.lineTo(150,300);
contexto.closePath();
contexto.stroke();
}
</script>
</head>
<body onLoad="dibujarCanvas();">
<canvas id="miCanvas" width="450" height="350">Su navegador no soporta Canvas.</canvas>
</body>
</html>
El código anterior produce la siguiente salida:
También puedes verla en esta página: ejemplo2,
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.