IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

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();
     }
  }
}

Copyright © 2010 BUbaj. Powered By bubaj.com
JavaScript    Sintaksa    Osnovne funkcije    Kontrolne strukture    Dogadjaji    Browser funkcije    HTML DOM objekti    Tabele    JS i CSS    CANVAS    Skripte