IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

Nijansiranje boja

Ovde imamo dve funkcije na raspolaganju:

  • createLinearGradient (x1,y1,x2,y2) - za linearno gradiranje boje (postepeno) od tačke x1, y1 do tačke x2, y2
  • createRadialGradient (x1,y1,r1,x2,y2,r2) - za kružno gradiranje od kružnice iz tačke x1, y1 sa poluprečnikom r1, do kružnice u tački x2, y2 sa poluprečnikom r2. Shvatite ovo kručno kao prsten a prsten se gradira bojom.

Medjutim ako mi samo ovako postavimo ove funkcije, ništa se neće desiti jer one samo definišu površinu gde će se vršiti nijansiranje. Moramo sad definisati i koja će biti početna boja a koja krajnja kako bi izmedju nastalo nijansiranje. Početna i krajnja boja se definišu funkcijom:

addColorStop (pozicija, color) - color je boja na primer u rgb ili rgba ili heksa zapisu.

E sad obe boje izmedju kojih će se praviti prelaz se definišu istom funkcijom addColorStop( ), stim što pozicija odredjuje da li će se od vrha ka dnu krenuti sa prvom bojom ili sa drugom, odnosno ako je u pitanju radijalni gradijent, da li će se sa prvom bojom krenuti sa unutrašnjosti ili sa spolja ka unutra. Zapravo pozicija može imati vrednosti od 0 do 1 a kad izmedju boja menjate 0 i 1 menjaju se i pozicije koje sam gore objašnjavao. E sad ako stavimo na primer jednu 0.5 a drugu 1 onda će se nijansirati ali malo više u korist one sa 1 itd itd. Malo eksperimentišite sa narednim primerima i videćete o čemu se radi.

Medjutim ako iskoristimo sve dosadašnje funkcije kako treba, i dalje se ništa neće prikazivati na stranici. Mi smo do sada zapravo definisali vrednost za stil bojenja. Znači možemo definisati sledeće korišćenjem naše dobro poznate promenjljive ctx:

nijansiranje = ctx.createLinearGradient(0,0,0,600);
nijansiranje.addColorStop(0, "#00ABEB");
nijansiranje.addColorStop(0.5, "#fff");
ctx.fillStyle = nijansiranje;

Kao što vidite sve ovo smo iskoristili kako bi smo definisali jedan stil. E sad taj stil možemo koristiti u funkcijama kako nam je volja, na primer u kreiranju neke površine pravougaone. Evo kompletnog takvog primera:

<html><head>
<script type="application/javascript">
function crtaj() {
  canvas = document.getElementById("kocke");
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    nijansiranje = ctx.createLinearGradient(0,0,0,600);
    nijansiranje.addColorStop(0, "#00ABEB");
    nijansiranje.addColorStop(1, "#fff");
    ctx.fillStyle = nijansiranje;
    ctx.fillRect(0,0,600,600);
  }
}
</script>
</head><body onload="crtaj();">
<canvas id="kocke" width="600" height="600"></canvas>
</body></html>

Mislim da je ovaj primer prilično jasan, kao i sve ove nove funkcije. Evo još jedan primer ali vezan za radijalni gradijent boje:

<html><head>
<script type="application/javascript">
function crtaj() {
  canvas = document.getElementById("kocke");
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
  // Definiše prelaze boja
    radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
    radgrad.addColorStop(0, "#A7D30C");
    radgrad.addColorStop(0.9, "#019F62");
    radgrad.addColorStop(1, "rgba(1,159,98,0)");
    radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
    radgrad2.addColorStop(0, "#FF5F98");
    radgrad2.addColorStop(0.75, "#FF0188");
    radgrad2.addColorStop(1, "rgba(255,1,136,0)");
    radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
    radgrad3.addColorStop(0, "#00C9FF");
    radgrad3.addColorStop(0.8, "#00B5E2");
    radgrad3.addColorStop(1, "rgba(0,201,255,0)");
    radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
    radgrad4.addColorStop(0, "#F4F201");
    radgrad4.addColorStop(0.8, "#E4C700");
    radgrad4.addColorStop(1, "rgba(228,199,0,0)");
  // Crta oblike
    ctx.fillStyle = radgrad4;
    ctx.fillRect(0,0,150,150);
    ctx.fillStyle = radgrad3;
    ctx.fillRect(0,0,150,150);
    ctx.fillStyle = radgrad2;
    ctx.fillRect(0,0,150,150);
    ctx.fillStyle = radgrad;
    ctx.fillRect(0,0,150,150);
  }
}
</script>
</head><body onload="crtaj();">
<canvas id="kocke" width="150" height="150"></canvas>
</body></html>

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