Crtanje krivulja (quadratic i bezier)
Za crtanje zakrivljene linije od jedne točke do druge točke koriste se dvije metode:
quadraticCurveTo(cp1x, cp1y, x, y) - cp1x,cp1y definiraju kontrolnu točku,
dok x,y definira krajnju točku
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) - cp1x,cp1y je prva,
a cp2x,cp2y druga kontrolna točka. Krajnja točka je određene sa x,y
Primjer - bezier & quadratic: vidi primjer » vidi code
Svojstva krivulje
Predefinirana krivulja je crna i određene debljine.
Kako bi se izmjenila svojstva 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
Primjeri crtanja krivulja različitih svojstava
Primjer - strokeStyle, lineWidth: vidi primjer » vidi code
Primjer - lineCap='round': vidi primjer » vidi code
Primjer - lineJoin='round': vidi primjer » vidi code
Primjer - lineJoin='miter' miterLimit=5: vidi primjer » vidi code
Primjer - isprekidana linija: vidi primjer » vidi code
Crtanje dvije različite linije
Kako bi se omogućilo crtanje dvije linije različitih svojstava (boja, širina, spajanje i isprekidanost) potrebno je svaku
liniju zasebno započeti sa:
beginPath() - metoda koja otvara crtanje linije
Primjer - dvije različite linije: vidi primjer » vidi code