Līniju zīmēšana caur canvas uz JavaScript
Sāksim ar vienkāršu - ar līniju zīmēšanu. Lai saprastu, kā tas tiek darīts, iedomājieties, ka jums ir papīra lapa un zīmulis. Jūs varat zīmēt uz šīs lapas, vai arī varat neko nezīmējot vienkārši pārvietot zīmuli vajadzīgajā punktā.
Tāpat strādā arī JavaScript: tam ir
zīmulis (vai zīmēšanas pildspalva), vajadzīgajā
vietā jūs varat to pārvietot, izmantojot
metodi moveTo, un zīmēt - izmantojot
metodi lineTo.
Abas metodes kā parametrus pieņem punktu, kurā
pārvietot pildspalvas galu - pirmais parametrs
ir koordināte horizontāli, bet otrais -
vertikāli. Koordinātu sākumpunkts - punkts 0,
0 - tas ir augšējais kreisais elementa stūris.
Kad pildspalva tiek pārvietota vajadzīgajā punktā -
metode moveTo vienkārši pārvieto, bet
lineTo pārvietošanās procesā zīmē
līniju no pašreizējās pildspalvas pozīcijas līdz punktam,
kurā tā tiks pārvietota.
Tomēr, ja palaiž iepriekš minēto kodu
- nekas nenotiks: jāuzraksta
vēl divas komandas: pirmā komanda beginPath
jānorāda pirms līnijas zīmēšanas sākuma,
un otrā komanda stroke jāizsauc
pēc visām moveTo un lineTo
kombinācijām, lai līnija uzzīmētos.
Tātad, uzrakstīsim darba kodu līnijas zīmēšanai:
Uzzīmēsim līniju
<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();
:
Uzzīmēsim putniņu
<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();
:
Uzzīmēsim trīsstūri
<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();
:
Uzzīmēsim kvadrātu
<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ūru aizvēršana
Lai uzzīmētu slēgtu figūru, nav obligāti
jāuzzīmē visas līnijas - pēdējā līnija var
uzzīmēties automātiski un aizvērt figūru.
Lai to izdarītu, pirms metodes stroke vajadzētu
izsaukt metodi closePath.
Šī metode mēģina aizvērt figūru, zīmējot taisnu līniju no beigu punkta uz sākuma punktu. Ja figūra jau bija aizvērta vai ir vienkārši punkts, tad metode neko nedara.
Uzzīmēsim trīsstūri, izmantojot 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); - šo soli izlaižam
ctx.closePath();
ctx.stroke();
:
Figūru aizpildīšana
Metodes stroke vietā var izmantot
metodi fill - šajā gadījumā figūrai nav obligāti
jābūt pilnībā aizvērtai - tā tiks aizpildīta
arī tā:
<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); - šo soli izlaižam
//ctx.closePath(); - un šo arī
ctx.fill();
:
