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ą

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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ę

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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į

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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ą

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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();

Результат:

Praktinės užduotys