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 (estilos de línea)





Disponemos de varias propiedades para configurar el etilo de la línea. Mediante un ejemplo veremos como fijar valores a las propiedades: lineWidth, lineCap y lineJoin.



<!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.beginPath();
lienzo.strokeStyle="rgb(255,0,0)";
lienzo.lineWidth=7;
lienzo.moveTo(10,5);
lienzo.lineTo(10,295);
lienzo.stroke();

lienzo.beginPath();
lienzo.strokeStyle="rgb(0,255,0)";
lienzo.lineCap="butt";
lienzo.moveTo(30,5);
lienzo.lineTo(30,295);
lienzo.stroke();
lienzo.lineCap="round";
lienzo.beginPath();
lienzo.moveTo(50,5);
lienzo.lineTo(50,295);
lienzo.stroke();
lienzo.lineCap="square";
lienzo.beginPath();
lienzo.moveTo(70,5);
lienzo.lineTo(70,295);
lienzo.stroke();

lienzo.beginPath();
lienzo.strokeStyle="rgb(0,0,255)";
lienzo.lineJoin="bevel";
lienzo.moveTo(100,90);
lienzo.lineTo(130,10);
lienzo.lineTo(160,90);
lienzo.stroke();

lienzo.beginPath();
lienzo.lineJoin="round";
lienzo.moveTo(100,180);
lienzo.lineTo(130,100);
lienzo.lineTo(160,180);
lienzo.stroke();

lienzo.beginPath();
lienzo.lineJoin="miter";
lienzo.moveTo(100,270);
lienzo.lineTo(130,190);
lienzo.lineTo(160,270);
lienzo.stroke();

}
}
</script>

</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

Para definir el ancho de la línea disponemos de la propiedad lineWidth:



lienzo.lineWidth=7;

La propiedad lineCap indica como se grafican los puntos extremos de la línea:



lienzo.lineCap="butt";

Los valores permitidos son: "butt", "round" y "square".Si disponemos "butt" lo finaliza inmediatamento, si indicamos "round" genera un semicírculo y con "square" dibuja un cuadrado.


La tercer propiedad es lineJoin. Con esta indicamos como debe procederse a graficar en los vértices de uniones de segmentos. Los valores permitidos son: "bevel", "round" y "miter".










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

  • Medallas
  • 0
    Favoritos
  • 9571
    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