Hajde da naučimo kako da nacrtamo tačku u JavaScript-u u pretraživaču.. nije tehnički teško, ali samo za one koji petljaju, a za one koji nisu spremni da nacrtaju tačku na internetu - ovo je naravno čitavo dostignuće.
Postoji mnogo načina da nacrtate tačku, pogledajmo ih
Koristeći Unity/Godot/microStudio ili bilo koji od hiljada graditelja igara.. svi će oni na ovaj ili onaj način kreirati neki kod koji će biti JavaScript ili Webassembly, a ipak će nam pokazati poentu.Nas ovaj put ne zanima.nećemo baš shvatiti šta se dešava, kontrola nad kodom će biti minimalna i nečitljiva u izvornom kodu, osim toga ogromna.
Ovaj put Džedaja nam je što je moguće bliži, jer.naš kod neće biti velik i jasan kao dan, nećemo puno apstrahovati, nećemo značajno povećati naš kod bibliotekama.Kontrola koda bi također bila odlična
Ovo je naravno put Džedaja.Šifra je maksimalno komplikovana, maksimalna kontrola stvari koje, takoreći, ne treba kontrolisati.Izvorni kodovi su najminimalniji i sa poznavanjem golimog JavaScripta možemo samo bezbedno da idemo da se zaposlimo, jer.takvi ljudi nam trebaju.
Ali naš zadatak nije da nađemo posao, već da na jednostavan i lak način nacrtamo tačku.Naš vektor je brzina i fleksibilnost.
Ja sam izabrao biblioteku
p5js da nacrtam tacku.Nije samo to, naravno, da je zadatak bio da se nacrta tacka i to je to, naravno, sve bi se moralo raditi u golom JavaScript-u, ali ja to radim u perspektivi, .k.onda ćemo ti i ja raditi druge stvari koje će izgledati fantastično, a za ovo nam je potreban dobar alat.Jedan od njih je p5js.U golim JavaScript-u, potrebno je da kreiramo platno da definišemo funkcije inicijalizacije i ponovnog crtanja, u p5 je i to urađeno, ali vrlo koncizno.
Ali prvo..
Minimalno podešavanje okruženja za razvoj JavaScripta
Skinuti
p5.min.js i držite ga jedno pored drugog.Volim ovo
index.html
<html>
<head>
<script src="p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body style="margin: 0px;">
<main>
</main>
</body>
</html>
sketch.js
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
}
function draw() {
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
}
Ovo će se otvoriti u vašem pretraživaču ovako:
Pa, HTML je razumljiv, ali kakav je ovo JavaScript kod?
funkcija podešavanja je inicijalizacija, izvršava se jednom, u njoj kreiramo platno, tj.područje u kojem ćemo nacrtati tačku.window.innerWidth, window.innerHeight
je širina i visina ekrana, tj.definišemo platno preko celog ekrana i da, HTML takođe ima veoma važan stil za ovo
<body style="margin: 0px;">
Ne trebamo ništa drugo inicijalizirati, samo trebamo nacrtati tačku.Pogledaj princip ovdje.. funkcija crtanja se izvršava npr. 60 puta u sekundi, a 60 puta u sekundi ćemo nacrtati našu tačku.. izgleda da je ovo glupo, samo treba nacrtati tačku i to je ali u budućnosti će to biti osnova za opštu svu animaciju.
Generalno, kod za crtanje tačke je izuzetno jednostavan:
point(10,10)
i to je to!
Međutim, naš kod je malo veći
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
pozadina crna
bela zvezda
debljina tačke 10
i crtamo ga u sredini vertikalne i horizontalne.
Pa... nacrtali smo tačku na platnu, sve je kako treba, ali mogli bismo je čak nacrtati i na čistom HTML-u bez JavaScripta.. Kako bi to izgledalo?
To ga čini elementarnim i još lakšim, ali principi su potpuno drugačiji, evo konačnog koda za crtanje kvadrata u sredini ekrana
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color: black;">
<div style="position: fixed; top: 50%; left: 50%; background-color: white; width: 10px; height: 10px;"></div>
</body>
</html>
Rezultat je skoro isti
Da, prilično je lako nacrtati nešto u centru u HTML-u, ali da biste dodali animacije, a još više normalnu interaktivnost, morat ćete razmišljati po principima CSS-a.Iako je to prilično zanimljiv zadatak.Samo jedna elementarna stvar ubija sve ovo, u CSS-u nema nasumičnih brojeva, ovo će ubiti sve naše pokušaje u budućnosti, zbog čega ću manje davati prednost ovom pravcu.
Ako zamislim da želim da napravim zvjezdano nebo na golom CSS-u, onda mi neće sve uspjeti, jerzvijezde bi se trebale pojaviti na nasumične pozicije, a ako imaju unaprijed kreirane koordinate, to neće biti tako lijepo i ne tako jednostavno, jer možete napisati generator slučajnih brojeva u CSS-u, ali će takav kod izgledati potpuno ružno, nečitljivo i teško razumej!