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

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

Результат:

Uzzīmēsim putniņu

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

Результат:

Uzzīmēsim trīsstūri

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

Результат:

Uzzīmēsim kvadrātu

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

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); - š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ā:

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); - šo soli izlaižam
//ctx.closePath(); - un šo arī
ctx.fill();

Результат:

Praktiskie uzdevumi