Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

Puntas de línea (lineCap) - Canvas

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)
 JavaScriptDescripciónDefecto
lineWidthcontext.lineWidth=numero;Determina (sets) o devuelve (returns) la grosor de la línea.1
strokeStylecontext.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. 
lineCapcontext.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 chuletastar 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";).
<canvas id="juntas" width="250" height="200">Su navegador no soporta canvas :( </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();    
    }
  }

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas