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>