HTML5 Canvas

Geometrijskim oblicima kao što su linija, kružnica, luk, pravokutnik i krivulja možemo definirati određena svojstva kao što su boja, prozirnost, gradient, uzorak, sjena te svojstva linije.

Boja

Boja geometrijskog lika može se odnositi ili na liniju uokviravanja (stroke) ili na ispunu (fill).
Iz tog razloga postoje dva svojstva:
strokeStyle = 'boja' - definira boju okvira
fillStyle = 'boja' - definira boju ispune (obavezno upotrijebiti fill() metodu)

Primjer - boja: vidi primjer » vidi code

Prozirnost (engl. Transparent)

Prozornost se postiže pomoću gornjih svojstava strokeStyle i fillStyle na način da se boja umjesto rgb(100,10,255) unese sa rgba(100,10,255, 0.5). gdje je r-red, g-green, b-blue, a-alpha. Parametar alpha može biti broj između 0.0 i 1.0.

Primjer - prozirnost: vidi primjer » vidi code

Ukoliko želimo da sve nacrtano u CANVASu bude prozirno tada ćemo upotrijebiti svojstvo:
globalAlpha = 0.0 - 1.0

Primjer - globalAlpha: vidi primjer » vidi code

Ako želim da jedan geom. lik ima veću prozirnost, a drugi manju upotrijebit će se dvaput globalAlpha unutar beginPath() i stroke()¸ metoda.

Primjer - globalAlpha 2x: vidi primjer » vidi code

Gradient

Gradient je postupno prelaženje sa jedne boje na drugu.
Za kreiranje gradienta koriste se metode:

createLinearGradient(x1,y1, x2,y2)
   - stvara objekt grad linearnog gradienta između točaka x1,y1 i x2,y2

createRadialGradient(x1,y1,r1, x2,y2,r2)
    - stvara objekt grad radijalno gradijentas između kružnica x1,y1,r1 i x2,y2,r2

grad.addColorStop(position, color)
    - definira boju na određenoj poziciji. Position može biti između 0.0 i 1.0. Nula definira boju u točki x1,y1 dok 1 definira boju u točki x2,y2. Za position između 0 i 1 je neka točka između x1,y1 i x2,y2, npr. 0.6 na donjoj slici.

Na kraju je potrebno napisati fillStyle = grad. Dakle, treba staviti grad objekt umjesto boje. Pogledaj primjer dolje.

Primjer - linearni gradijent: vidi primjer » vidi code

Primjer - radijalni gradijent: vidi primjer » vidi code

Primjer - radijalni gradijent - kugla: vidi primjer » vidi code
Primjer - radijalni gradijent - sunce: vidi primjer » vidi code

Uzorak (engl. Pattern)

Umjesto boje ili gradienta može se upotrijebiti uzorak (pattern).
To omogućava metoda:

createPattern(imgObj, type)
    - stvara pattern objekt. Parametar type može biti repeat, repeat-x, repeat-y, no-repeat

Primjer - pattern: vidi primjer » vidi code

Sjena (engl. Shadow)

Za stvaranje sjene dovoljna su 4 svojstva:
shadowOffsetX , shadowOffsetY
    - definiraju pomak sjene za dx i dy pixela
shadowBlur = 13
    - definira razlivenost (blur) sjene
shadowColor = 'rgba(0, 0, 0, 0.5)'
    - definira boju sjene. Najčešće je to crna boja.

Primjer - sjena desno od pravokutnika: vidi primjer » vidi code

Primjer - sjena okolo pravokutnika: vidi primjer » vidi code

Primjer - sjena kruga: vidi primjer » vidi code

Primjer - sjena kugle: vidi primjer » vidi code

Primjer - sjena texta: vidi primjer » vidi code

Svojstva linije

Predefinirana linija je crna i određene debljine.
Kako bi se izmjenila svojstva linije upotrebljavaju se slijedeće metode:

strokeStyle = '#FFCCFF' - definira boju linije
lineWidth = 5 - definira debljinu linije u pixelima

lineCap = ' butt | round | square' - definira oblik kraja linije


lineJoin = 'miter | bevel | round' - definira stil spajanja dve linije


miterLimit = 5 - definira maksimalnu dužinu mitera, budući da miter raste što je kut spajanja dve linije manji. Ima smisla samo ako je lineJoin='mitter'.


setLineDash([5]) - definira dužinu crtice i razmaka u isprekidanoj liniji
setLineDash([5]) - crtica je 5px a razmak je isto 5px setLineDash([5,3]) - crtica je 5px a razmak 3px setLineDash([5,3,2,4]) - prvo ide crtica 5px pa razmak 3px, nakon toga crtica 2px pa razmak 4px

getLineDash() - prikazuje isprekidanost definiranu sa setLineDash()

lineDashOffset = 2 - definira offset, odnosno za koliko px će se linija pomaknuti prema napred

Primjer - strokeStyle, lineWidth: vidi primjer » vidi code

Primjer - lineCap='round': vidi primjer » vidi code

Primjer - lineJoin='miter': vidi primjer » vidi code

Primjer - lineJoin='miter' miterLimit=5: vidi primjer » vidi code

Primjer - isprekidana linija: vidi primjer » vidi code