Linijų braižymas per canvas naudojant JavaScript
Pradėkime nuo paprasto – nuo linijų braižymo. Kad suprastumėte, kaip tai daroma, įsivaizduokite, kad turite popieriaus lapą ir pieštuką. Jūs galite piešti ant šio lapo, arba galite tiesiog perkelti pieštuką į norimą vietą nepiešdami.
Taip pat veikia ir JavaScript: jis turi
pieštuką (arba piešimo plunksną), į reikiamą
vietą jūs galite jį perkelti naudodami
metodą moveTo, o piešti – naudodami
metodą lineTo.
Abu metodai parametrais priima tašką, į
kurį perkelti piešimo plunksnos galvutę – pirmu parametru
koordinatę horizontaliai, o antru –
vertikaliai. Koordinačių pradžia – taškas 0,
0 – tai viršutinis kairysis elemento kampas.
Kai piešimo plunksna perkeliama į norimą tašką –
metodas moveTo tiesiog perkelia, o
lineTo perkelimo procese piešia
liniją nuo dabartinės piešimo plunksnos padėties iki taško,
į kurį ji bus perkelta.
Tačiau, jei paleisite aukščiau pateiktą kodą
– nieko neatsitiks: būtina parašyti
dvi komandas dar: pirmoji komanda beginPath
turi būti nurodyta prieš pradedant piešti
liniją, o antroji komanda stroke turi
būti iškviesta po visų moveTo
ir lineTo kombinacijų tam, kad linija nusipieštų.
Taigi, parašykime veikiantį kodą linijai piešti:
Nupieškime liniją
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Nupieškime paukštelę
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Nupieškime trikampį
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Nupieškime kvadratą
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Figūrų uždarumas
Uždarios figūros piešimui nebūtina
atlikti visų linijų – paskutinė linija gali
nusipiešti automatiškai ir uždaryti figūrą.
Tam prieš metodą stroke reikėtų
iškviesti metodą closePath.
Šis metodas bando uždaryti figūrą, piešdamas tiesią liniją iš galinio taško į pradinį. Jei figūra jau buvo uždaryta arba yra tiesiog taškas, tai metodas nieko nepadaro.
Nupieškime trikampį, naudodami closePath:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - šį žingsnį praleidžiame
ctx.closePath();
ctx.stroke();
:
Figūrų užpildymas
Vietoj metodo stroke galima naudoti
metodą fill – šiuo atveju figūra nebūtinai
turi būti visiškai uždara – ji bus užpildyta
ir taip:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - šį žingsnį praleidžiame
//ctx.closePath(); - ir šį taip pat
ctx.fill();
:
