Crtanje linije (dužine)
Za crtanje linije od jedne točke do druge točke dovoljne su dvije metode:
moveTo(x1,y1) - definira početnu točku tj. pomiče olovku na koordinate x1,y1
lineTo(x2,y2) - definira liniju od točke gdje je trenutno olovka do x2,y2
stroke() - ispisuje liniju sa prethodno definiranim točkama tj. od x1,y1 do x2,y2
Primjer - crtanje jedne linije: vidi primjer » vidi code
Primjer - crtanje dve spojene linije:
Primjetite kako je početna točka druge linije točka gdje je završila olovka crtajući prvu liniju.
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
Primjeri crtanja linije različitih svojstava
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
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
Osim ove metode dobro je napomenuti još i:
closePath() - metoda koja zatvara liniju tj. spaja točku gdje je stala olovka sa početkom linije
Primjer - zatvaranje linije: vidi primjer » vidi code