Puntas de línea (lineCap)
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";).
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();
}
}