Aprenem a dibuixar un punt en JavaScript en un navegador... no és tècnicament difícil, però només per a aquells que no estan preparats per dibuixar un punt a Internet, això és, per descomptat, tot un èxit.
Hi ha moltes maneres de dibuixar un punt, mirem-les
Utilitzant Unity/Godot/microStudio o qualsevol dels milers de creadors de jocs... tots crearan algun codi d'una manera o altra que serà JavaScript o Webassembly, i encara ens mostraran el punt.No ens interessa aquest camí.no entendrem realment què està passant, el control sobre el codi serà mínim i il·legible en el codi font, a més és enorme.
Aquest camí dels Jedi és el més proper possible a nosaltres, perquè.el nostre codi no serà gran i clar com el dia, no abstraurem gaire, no augmentarem molt el nostre codi amb biblioteques.El control del codi també seria fantàstic
Aquest és, per descomptat, el camí dels Jedi.El codi és el més complicat possible, el màxim control de coses que, per dir-ho, no cal controlar.Els codis font són els més mínims i amb el coneixement del JavaScript de Golimy, podem anar amb seguretat a buscar feina, perquè.necessitem gent així.
Però la nostra tasca no és trobar feina, sinó dibuixar un punt d'una manera senzilla i fàcil.El nostre vector és la velocitat i la flexibilitat.
Vaig triar la biblioteca
p5js per dibuixar un punt.No és només això, per descomptat, si la tasca fos dibuixar un punt i ja està, per descomptat, tot s'hauria de fer en JavaScript nu, però ho faig en perspectiva, .k.llavors tu i jo farem altres coses que es veuran increïbles, i per això necessitem una bona eina.Un d'ells és p5js.A golim JavaScript, hem de crear un llenç per definir les funcions d'inicialització i redibuix, a p5 això també es fa, però de manera molt concisa.
Però primer..
Configuració mínima de l'entorn per al desenvolupament de JavaScript
descarregar
p5.min.js i mantenir-lo al costat.com això
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);
}
Això s'obrirà al vostre navegador així:
Bé, HTML és comprensible, però quin tipus de codi JavaScript és aquest?
la funció de configuració és inicialització, s'executa una vegada, en ella creem un llenç, és a dir.zona on dibuixarem un punt.window.innerWidth, window.innerHeight
és l'amplada i l'alçada de la pantalla, és a dir.definim un llenç de pantalla completa i sí, l'HTML també té un estil molt important per a això
<body style="margin: 0px;">
No necessitem inicialitzar res més, només cal dibuixar un punt.Mireu el principi aquí .. la funció de dibuix s'executa, per exemple, 60 vegades per segon, i 60 vegades per segon dibuixarem el nostre punt .. Semblaria que això és estúpid, només hem de dibuixar un punt i això és això, però en el futur serà la base de tota l'animació general.
En general, el codi per dibuixar un punt és extremadament senzill:
point(10,10)
i ja està!
Tanmateix, el nostre codi és una mica més gran
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
fons negre
estrella blanca
gruix de punt 10
i el dibuixem al centre de la vertical i l'horitzontal.
Bé... vam dibuixar un punt al llenç, tot és com hauria de ser, però fins i tot podríem dibuixar-lo en HTML pur sense cap JavaScript.. Com seria?
Ho fa elemental i encara més fàcil, però els principis són completament diferents, aquí teniu el codi final per dibuixar un quadrat al centre de la pantalla
<!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>
El resultat és gairebé el mateix
Sí, és bastant fàcil dibuixar alguna cosa al centre en HTML, però per afegir animacions, i més encara una interactiva sana, hauràs de pensar segons els principis de CSS.Encara que és una tasca força interessant.Només una cosa elemental mata tot això, no hi ha números aleatoris en CSS, això matarà tots els nostres intents en el futur, per això donaré menys preferència a aquesta direcció.
Si m'imagino que vull fer un cel estrellat en CSS nu, aleshores tot no em sortirà bé, perquèles estrelles haurien d'aparèixer en posicions aleatòries, i si tenen coordenades pre-creades, no serà tan bonic ni tan senzill, perquè podeu escriure un generador de números aleatoris en CSS, però aquest codi semblarà completament lleig, il·legible i difícil de llegir. entendre!