JavaScript zīmējums uz pamatnes (canvas)

Pamatne (canvas)

Veidojot tīmekļa lappuses, bieži tās tiek papildinātas gan ar gataviem attēliem, gan pašrocīgi veidotiem attēliem. Viens no veidiem, kā tīmekļa lappusē iekļaut pašrocīgi veidotus zīmējumus, ir izmantot HTML tagu canvas un skriptu.

HTML tags canvas tīmekļa lappusē izveido tukšu taisnstūra apgabalu, kurā var zīmēt, ko turpmāk sauksim par pamatni, piemēram:

<canvas id="manaPamatne" width="200" height="100"> </canvas>, kur parametri width="200" height="100" nosaka pamatnes platumu un augstumu, bet parametrs id="manaPamatne" piešķir pamatnei identifikatoru, kas būs nepieciešams turpmāk – veidojot zīmējuma skriptu. 

Lai pamatnē būtu ērtāk zīmēt, ir ieviesta koordinātu sistēma ar atskaites punktu tās augšējā kreisajā stūrī, kur x ass vērsta pa labi, bet y ass uz leju:

Ja pamatnei vēlatas pievienot rāmīti un/vai krāsu, tad izmanto parametru style, piemēram:

style="border:1px solid #E62B2B; background-color:#B7D4F5"

Tīmekļa lappuses piemērs ar pamatni:

<p>Te būs pamatne </p>

<canvas id="manaPamatne" width="200" height="100" 

    style="border:1px solid #E62B2B; background-color:#B7D4F5">

</canvas>

<p>Nākamā rindkopa</p>

Viena tīmekļa lappuse var saturēt vienu vai vairākas pamatnes.

Zīmējuma veidošana pamatnē (canvas)

Iepriekšējā nodaļa aplūkojām, kā tīmekļa lappusē iekļaut pamatni, bet, lai tajā veidotu paredzēto zīmējumu, parasti rakstām skriptu. Lai skriptā norādītu, kur un kā zīmēsim, tā sākumā jāiekļauj šādi divi priekšraksti:

let pamatne = document.getElementById("manaPamatne");

let zimejums = pamatne.getContext("2d");

Lai uz pamatnes uzzīmētu un aizpildītu taisnstūri, var izmantot metodes strokeRect un fillRect:

strokeRect(x, y, garums, platums)

fillRect(x, y, garums, platums)

Piemēram:

let pamatne = document.getElementById("manaPamatne");

let zimejums = pamatne.getContext("2d");

zimejums.strokeRect(20,20,150,70);

Ja nepieciešams, pirms taisnstūra zīmēšanas var norādīt tā līnijas krāsu un biezumu (platumu), piemēram:

let pamatne = document.getElementById("manaPamatne");

let zimejums = pamatne.getContext("2d");

zimejums.lineWidth = 5; // līnijas biezums

zimejums.strokeStyle="green"; // līnijas krāsa

zimejums.strokeRect(20,20,150,70);

zimejums.lineWidth = 8;

zimejums.strokeStyle="#FF0000";

zimejums.strokeRect(30,30,50,50);

Fons.

Lai uz pamatnes uzzīmētu taisnstūri noteiktā krāsā, var izmantot metodi fillRect, piemēram:

let pamatne = document.getElementById("manaPamatne");

let zimejums = pamatne.getContext("2d");

zimejums.fillRect(30,25,60,50); //melns taisnstūris

zimejums.fillStyle= "yellow"; // taisnstūra krāsas maiņa

zimejums.fillRect(110,25,60,50);