Risanje črt preko canvas v JavaScript
Začnimo s preprostim - z risanjem črt. Da razumemo, kako to deluje, predstavljajte si, da imate list papirja in svinčnik. Lahko rišete na tem listu ali pa brez risanja preprosto premikate svinčnik na želeno točko.
Enako deluje tudi JavaScript: ima
svinčnik (ali pisalo za risanje), na želeno
mesto ga lahko premaknete z uporabo
metode moveTo, rišete pa z uporabo
metode lineTo.
Obe metodi kot parameter sprejemata točko, v
katero premakniti konico pisala - prvi parameter
je koordinata vodoravno, drugi pa
navpično. Začetek koordinat je točka 0,
0 - to je zgornji levi kot elementa.
Ko se pisalo premakne na želeno točko -
metoda moveTo preprosto premakne,
lineTo pa med premikanjem riše
črto od trenutnega položaja pisala do točke,
v katero se premakne.
Vendar, če zaženete zgoraj navedeno kodo
- ne bo se zgodilo nič: potrebno je napisati
še dve ukazi: prvi ukaz beginPath
mora biti naveden pred začetkom risanja
črte, drugi ukaz stroke pa mora
biti klican po vseh kombinacijah moveTo
in lineTo, da se črta dejansko nariše.
Torej, napišimo delujočo kodo za risanje črte:
Narišimo črto
<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();
:
Narišimo ptičko
<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();
:
Narišimo trikotnik
<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();
:
Narišimo kvadratček
<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();
:
Zapiranje likov
Za risanje zaprtega lika ni nujno
narediti vseh črt - zadnja črta se lahko
nariše samodejno in zapre lik.
Za to je treba pred metodo stroke
poklicati metodo closePath.
Ta metoda poskuša zapreti lik z risanjem ravne črte od končne točke do začetne. Če je bil lik že zaprt ali je preprosto točka, potem metoda ne naredi nič.
Narišimo trikotnik z uporabo 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); - ta korak izpustimo
ctx.closePath();
ctx.stroke();
:
Barvanje likov
Namesto metode stroke je mogoče uporabiti
metodo fill - pri tem lik ni nujno
povsem zaprt - prebarval se bo
tudi tako:
<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); - ta korak izpustimo
//ctx.closePath(); - in tega tudi
ctx.fill();
:
