Puntas de línea (lineCap)

facebook-svg gplus-svg twitter-svg

Para dibujar lineas en el <canvas>, además de los metodos que ya hemos visto, podemos utilizar la propiedad lineCap para dar formato a las puntas de línea. Los valores que puede tomar lineCap son "butt" (tope), "round" (redondeado) y "square" (cuadrado)

  JavaScript Descripción Defecto
lineWidth context.lineWidth=numero; Determina (sets) o devuelve (returns) la grosor de la línea. 1
strokeStyle context.strokeStyle=color|gradient|pattern; Determina (sets) o devuelve (returns) el color, gradiente o patrón de la línea. negro
beginPath() context.beginPath(); Empezamos a dibujar  
moveTo() context.moveTo(x,y); Mueve el "lapiz" a un punto en el canvas, especificado por sus coordenadas "x" e "y". NO DIBUJA ninguna línea. x=0;
y=0;
lineTo() context.lineTo(x,y); Define una línea desde un punto especificado anteriormente hasta otro punto especificado por sus coordenadas "x" e "y". Mueve el "lapiz" a este punto.  
lineCap context.lineCap="butt|round|square"; Determina (sets) o devuelve (returns) el aspecto de las┬ápuntas de una línea. butt
stroke() context.stroke(); Dibuja una línea ya definida.  

Vea la chuleta con las propiedades y metodos() de canvas.

Veamos un ejemplo. A continuación dibujamos 3 líneas del mismo tamaño, cada una con otro tipo de punta. La línea de arriba tiene una punta de línea normal (ctx.lineCap = "butt";), la del medio tiene una punta de línea redondeada (ctx.lineCap = "round";), mientras que la de abajo tiene una punta de línea cuadrada (ctx.lineCap = "square";).

Su navegador no soporta canvas :( 

	var canvas = document.getElementById("juntas");
		if (canvas && canvas.getContext) {
		var ctx = canvas.getContext("2d");
			if (ctx) {
				ctx.lineWidth = 25;
				ctx.strokeStyle = "#00f";
				// la línea de arriba
				ctx.beginPath();
				ctx.lineCap = "butt";
				ctx.moveTo(25, 50);
				ctx.lineTo(225, 50);
				ctx.stroke();
				// la línea del medio
				ctx.beginPath();
				ctx.lineCap = "round";
				ctx.moveTo(25, 100);
				ctx.lineTo(225, 100);
				ctx.stroke();
				// la línea de abajo
				ctx.beginPath();
				ctx.lineCap = "square";
				ctx.moveTo(25, 150);
				ctx.lineTo(225, 150);
				ctx.stroke();
				//las guias
				ctx.beginPath();
				ctx.lineWidth = 1;
				ctx.strokeStyle = "#ccc";
				ctx.moveTo(25, 25);
				ctx.lineTo(25, 175);
				ctx.moveTo(225, 25);
				ctx.lineTo(225, 175);
				ctx.stroke();				
				}
		}
Su navegador no soporta canvas :(