Tanuljuk meg, hogyan kell pontot rajzolni a JavaScript-ben a böngészőben.. ez technikailag nem nehéz, de csak azoknak, akik tapogatóznak, és azoknak, akik nem készültek pontot rajzolni az interneten - ez természetesen teljes eredmény.
Sokféleképpen lehet pontot rajzolni, nézzük meg őket
A Unity/Godot/microStudio vagy a több ezer játékkészítő bármelyikével... mindegyik létrehoz valamilyen kódot, így vagy úgy, hogy JavaScript vagy Webassembly lesz, és mégis megmutatja a lényeget.Minket ez az út nem érdekel.nem igazán fogjuk érteni, mi történik, a kód feletti kontroll minimális és olvashatatlan lesz a forráskódban, ráadásul hatalmas.
Ez a Jedik útja a lehető legközelebb van hozzánk, mert.a kódunk nem lesz olyan nagy és tiszta, mint a nap, nem fogunk sokat elvonatkoztatni, nem fogjuk nagyon megnövelni a kódunkat könyvtárakkal.A kódvezérlés is jó lenne
Ez természetesen a Jedik útja.A kód a lehető legbonyolultabb, olyan dolgok maximális ellenőrzése, amelyeket úgymond nem kell ellenőrizni.A forráskódok a legminimálisabbak és a golimy JavaScript ismeretében nyugodtan mehetünk elhelyezkedni, mert.ilyen emberekre van szükségünk.
De nem az a feladatunk, hogy munkát találjunk, hanem egyszerűen és könnyen megrajzoljunk egy pontot.A vektorunk a gyorsaság és a rugalmasság.
A könyvtárat választottam
p5js pontot rajzolni.Persze nem csak arról van szó, ha pont rajzolás lenne a feladat és ennyi, akkor persze mindent puszta JavaScript-ben kellene csinálni, de ezt perspektívában teszem, .k.akkor te és én más olyan dolgokat fogunk csinálni, amelyek csodálatosan néznek ki, és ehhez szükségünk van egy jó eszközre.Az egyik a p5js.A golim JavaScriptben egy vásznat kell készítenünk az inicializálási és újrarajzolási funkciók meghatározásához, a p5-ben ez is megtörténik, de nagyon tömören.
De először..
Minimális környezetbeállítás JavaScript-fejlesztéshez
Letöltés
p5.min.js és tartsa egymás mellett.mint ez
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);
}
Ez így fog megnyílni a böngészőben:
Nos, a HTML érthető, de milyen JavaScript kód ez?
a setup funkció inicializálás, egyszer lefut, benne vásznat készítünk, pl.terület, ahol pontot rajzolunk.window.innerWidth, window.innerHeight
a képernyő szélessége és magassága, azaz.definiálunk egy teljes képernyős vásznat, és igen, a HTML-nek ehhez is van egy nagyon fontos stílusa
<body style="margin: 0px;">
Semmi mást nem kell inicializálnunk, csak egy pontot kell rajzolnunk.Nézze meg itt az elvet .. a rajzolás függvény például másodpercenként 60-szor hajtódik végre, és másodpercenként 60-szor húzzuk le a pontunkat .. úgy tűnik, ez hülyeség, csak meg kell húzni egy pontot, és ennyi ez lesz, de a jövőben ez lesz az alapja minden általános animációnak.
Általában a pont rajzolásának kódja rendkívül egyszerű:
point(10,10)
és ez az!
A kódunk azonban valamivel nagyobb
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
háttér fekete
fehér csillag
pontvastagság 10
és a függőleges és vízszintes középpontjába rajzoljuk.
Hát.. rajzoltunk egy pontot a vászonra, minden úgy van, ahogy kell, de akár tiszta HTML-re is lerajzolhatnánk JavaScript nélkül.. Hogy nézne ki?
Elemivé és még könnyebbé teszi, de az alapelvek teljesen mások, itt van a végső kód egy négyzet rajzolásához a képernyő közepén
<!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>
Az eredmény majdnem ugyanaz
Igen, HTML-ben elég egyszerű rajzolni valamit a közepére, de ahhoz, hogy animációkat, és még inkább értelmes interaktívat adjunk hozzá, a CSS elvei szerint kell gondolkodni.Bár elég érdekes feladat.Csak egy elemi dolog öli meg mindezt, a CSS-ben nincsenek véletlenszerű számok, ez a jövőben minden próbálkozásunkat megöli, ezért ezt az irányt kevésbé részesítem előnyben.
Ha azt képzelem, hogy csillagos eget akarok csupasz CSS-en csinálni, akkor nekem nem fog menni minden, merta csillagok véletlenszerű pozícióban jelenjenek meg, és ha előre elkészített koordinátáik vannak, akkor nem lesz olyan szép és nem is olyan egyszerű, mert CSS-ben írhatsz véletlenszám generátort, de az ilyen kód teljesen csúnya, olvashatatlan és nehezen olvasható. megért!