KONTAKT
izuzetan[at]gmail.com

Stil linija

Postoje sledeće funkcije koje omogućavaju razne stilove linija:

• lineWidth = vrednost
• lineCap = tip
• lineJoin = tip
• miterLimit = vrednost

lineWidth - definiše debljinu linija. Vrednost mora biti pozitivna, a po defaultu je 1. Evo jednog primera:

function crtaj() {
canvas = document.getElementById("kocke");
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    for (i = 0; i < 10; i++){
      ctx.lineWidth = 1+i;
      ctx.beginPath();
      ctx.moveTo(5+i*14,5);
      ctx.lineTo(5+i*14,140);
      ctx.stroke();
    }
  }
}

lineCap - definiše krajeve linija. Tipovi mogu biti: butt, round i square. Da ne bih sad mnogo pisao objašnjenje evo primera koji daje sliku ova tri oblika linija:

function crtaj() {
canvas = document.getElementById("kocke");
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    lineCap = ["butt","round","square"];
// Crtanje pomoćnih linija za objašnjenje
    ctx.strokeStyle = "#09f";
    ctx.beginPath();
    ctx.moveTo(10,10);
    ctx.lineTo(140,10);
    ctx.moveTo(10,140);
    ctx.lineTo(140,140);
    ctx.stroke();
// Crtanje linija
    ctx.strokeStyle = "black";
    for (i=0; i<lineCap.length; i++){
      ctx.lineWidth = 15;
      ctx.lineCap = lineCap[i];
      ctx.beginPath();
      ctx.moveTo(25+i*50,10);
      ctx.lineTo(25+i*50,140);
      ctx.stroke();
    }
  }
}

lineJoin - definiše u kom obliku povezati dve linije. Postoje tri tipa: round (okruglina), bevel (kosina), i miter (kapa). Po defaultu je miter. Evo primera koji sve objašnjava (obratite pažnju na ivice linija gde se spajaju):

function crtaj() {
canvas = document.getElementById("kocke");
  if (canvas.getContext) {
     ctx = canvas.getContext("2d");
     lineJoin = ["round", "bevel", "miter"];
     ctx.lineWidth = 10;
     for (i =0; i < lineJoin.length; i++){
       ctx.lineJoin = lineJoin[i];
       ctx.beginPath();
       ctx.moveTo(-5,5+i*40);
       ctx.lineTo(35,45+i*40);
       ctx.lineTo(75,5+i*40);
       ctx.lineTo(115,45+i*40);
       ctx.lineTo(155,5+i*40);
       ctx.stroke();
     }
  }
}