Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

Uniones de línea - Canvas

Podemos dibujar un trazado en el <canvas> conectando lineas y curvas. Al conectar dos líneas podemos escoger también el tipo de unión.
 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. 
lineJoincontext.lineJoin="bevel | round | miter";Determina (sets) o devuelve (returns) el aspecto de las juntas entre líneas. Posibles valores: bevel (biselado), round (redondeado), miter (en angulo)mitter
miterLimitcontext.miterLimit=numero;Determina (sets) o devuelve (return) el aspecto de las juntas en miter. Puede tomar valores entre 1 (punta roma, aspecto biselado) y 5 (punta en angulo).10
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 trazados iguales, cada una con otro tipo de unión. El trazado de arriba tiene una unión en ángulo (ctx.lineJoin = "miter";), el del medio es redondeado ( ctx.lineJoin = "round";), mientras que el tercer trazado tiene una unión en bisel (ctx.lineJoin = "bevel";). Si no especificamos el tipo de unión, este es por defecto en ángulo ("miter").
Hay tambien una propiedad miterLimit que representa la distancia entre la parte interna y la parte externa del ángulo donde las dos líneas se encuentran. Puede tomar valores entre 1 (punta roma, aspecto biselado) y 5 (punta en angulo). Utilizando miterLimit podemos tramsformar una punta en angulo "miter" en una punta biselada. ( Vea el último trazado - en rojo, donde ctx.miterLimit=1; ).
<canvas id="juntas1" width="250" height="500">Su navegador no soporta canvas :( </canvas>
 var canvas = document.getElementById("juntas1");
  if (canvas && canvas.getContext) {
  var ctx = canvas.getContext("2d");
   if (ctx) {
    ctx.lineWidth = 25;
    ctx.strokeStyle = "#00f";
    // unión en angulo
    ctx.beginPath();
    ctx.lineJoin = "miter";
    ctx.moveTo(50, 150);
    ctx.lineTo(125, 50);
    ctx.lineTo(200, 150);
    ctx.stroke();
    // unión redondeada
    ctx.beginPath();
    ctx.lineJoin = "round";
    ctx.moveTo(50, 250);
    ctx.lineTo(125, 150);
    ctx.lineTo(200, 250);
    ctx.stroke();
    // unión en bisel
    ctx.beginPath();
    ctx.lineJoin = "bevel";
    ctx.moveTo(50, 350);
    ctx.lineTo(125, 250);
    ctx.lineTo(200, 350);
    ctx.stroke();
    // ejemplo miterLimit
    ctx.beginPath();
    ctx.strokeStyle = "#f00";
    ctx.lineJoin = "miter";
    ctx.moveTo(50, 450);
    ctx.lineTo(125, 350);
    ctx.lineTo(200, 450);
    ctx.miterLimit=1;
    ctx.stroke();
    }
  }

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas