KONTAKT
izuzetan[at]gmail.com

Stilovi i boje

Do sada smo linije crteža, kao i ispune crtali samo bojom koja je po defaultu, a to je crna boja. Ovde će mo videti kako se koriste i sve ostale moguće boje. Postoje dve funkcije za boje a to su:

• fillStyle = color - definiše boju ispune
• strokeStyle = color - definiše boju kontura

Color je definicija boje a ona može da se definiše na više načina:

ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

Svi ovi načini su nam poznati, sem zadnjeg rgba pa da ga objasnimo. Zapravo je zadnji parametar nepoznanica a ostala tri su definicije boja kao kod rgb. Zadnji parametar definiše nivo transparentnosti boje, odnosno nivo providnosti. Ako se stavi broj 1 onda nije providna boja a što se broj više smanjuje do 0 sve je transparentniji. Tako na primer 0.5 je upola providan.

Ako postavite strokeStyle i / ili fillStyle na kraju onda tako definišete boju za sve linije i površine. Ako neki oblik želite u drugoj boji, onda se fillStyle ili strokeStyle definiše odma u narednom redu u odnosu na red u koji ste definisali oblik. Evo nekoliko primera:

Primer1.

function crtaj() {
canvas = document.getElementById("kocke");
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    for (i=0; i<6; i++){
      for (j=0; j<6; j++){
        ctx.fillStyle="rgb(" + Math.floor(255-42.5*i) + "," + Math.floor(255-42.5*j) + ",0)";
        ctx.fillRect(j*25,i*25,25,25);
      }
    }
  }
}

Primer2.

function crtaj() {
canvas = document.getElementById("kocke");
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    for (i=0; i<6; i++){
      for (j=0; j<6; j++){
        ctx.strokeStyle="rgb(0,"  +  Math.floor(255-42.5*i)  +  ","  +  Math.floor(255-42.5*j) + ")";
        ctx.beginPath();
        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
        ctx.stroke();
      }
    }
  }
}