Laten we leren hoe we een punt in JavaScript in een browser kunnen tekenen.. het is technisch niet moeilijk, maar alleen voor degenen die morrelen, en voor degenen die niet bereid zijn om een punt op internet te tekenen - dit is natuurlijk een hele prestatie.
Er zijn veel manieren om een punt te trekken, laten we ze eens bekijken
Met Unity/Godot/microStudio of een van de duizenden gamebouwers.. ze zullen allemaal op de een of andere manier code maken die JavaScript of Webassembly zal zijn, en toch laten ze ons het punt zien.Wij zijn niet geïnteresseerd in dit pad.we zullen niet echt begrijpen wat er gebeurt, de controle over de code zal minimaal en onleesbaar zijn in de broncode, bovendien is het enorm.
Dit pad van de Jedi is zo dicht mogelijk bij ons, omdat.onze code zal niet zo groot en duidelijk zijn als de dag, we zullen niet veel abstraheren, we zullen onze code niet enorm uitbreiden met bibliotheken.Codecontrole zou ook geweldig zijn
Dit is natuurlijk de manier van de Jedi.De code is zo ingewikkeld mogelijk, de maximale controle over dingen die als het ware niet gecontroleerd hoeven te worden.De broncodes zijn het meest minimaal en met de kennis van golimy JavaScript kunnen we gewoon veilig een baan gaan zoeken, want.we hebben zulke mensen nodig.
Maar onze taak is niet om een baan te vinden, maar om op een eenvoudige en gemakkelijke manier een stip te tekenen.Onze vector is snelheid en flexibiliteit.
Ik koos voor de bibliotheek
p5js een punt te tekenen.Het is niet alleen dat, natuurlijk, als de taak was om een punt te trekken en dat is het, natuurlijk zou alles in kale JavaScript moeten worden gedaan, maar ik doe dit in perspectief, .k.dan zullen jij en ik andere dingen doen die er geweldig uitzien, en hiervoor hebben we een goed hulpmiddel nodig.Een daarvan is p5js.In golim JavaScript moeten we een canvas maken om de initialisatie- en hertekenfuncties te definiëren, in p5 gebeurt dit ook, maar heel beknopt.
Maar eerst..
Minimale omgevingsconfiguratie voor JavaScript-ontwikkeling
Downloaden
p5.min.js en houd het naast elkaar.soortgelijk
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);
}
Als gevolg hiervan wordt uw browser als volgt geopend
Nou, HTML is begrijpelijk, maar wat voor soort JavaScript-code is dit?
de setup-functie is initialisatie, deze wordt één keer uitgevoerd, daarin creëren we een canvas, d.w.z.gebied waar we een punt zullen trekken.window.innerWidth, window.innerHeight
is de breedte en hoogte van het scherm, d.w.z.we definiëren een canvas op volledig scherm en ja, de HTML heeft hier ook een zeer belangrijke stijl voor
<body style="margin: 0px;">
We hoeven niets anders te initialiseren, we hoeven alleen een punt te tekenen.Kijk naar het principe hier .. de tekenfunctie wordt uitgevoerd, bijvoorbeeld 60 keer per seconde, en 60 keer per seconde zullen we ons punt tekenen .. het lijkt erop dat dit dom is, we hoeven alleen maar een punt te tekenen en dat is het, maar in de toekomst zal het de basis zijn voor algemene animatie.
Over het algemeen is de code voor het tekenen van een punt uiterst eenvoudig:
point(10,10)
en alles!
Onze code is echter iets groter
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
achtergrond zwart
witte Ster
puntdikte 10
en we tekenen het in het midden van de verticale en horizontale.
Nou.. we hebben een stip op het canvas getekend, alles is zoals het zou moeten zijn, maar we zouden het zelfs op pure HTML kunnen tekenen zonder JavaScript.. Hoe zou het eruit zien?
Het maakt het elementair en zelfs gemakkelijker, maar de principes zijn compleet anders, hier is de definitieve code voor het tekenen van een vierkant in het midden van het scherm
<!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>
Het resultaat is bijna hetzelfde
Ja, het is vrij eenvoudig om iets in het midden in HTML te tekenen, maar om animaties toe te voegen, en nog meer een verstandige interactieve, moet je denken volgens de principes van CSS.Hoewel het best een interessante taak is.Slechts één elementair ding doodt dit alles, er zijn geen willekeurige getallen in CSS, dit zal al onze pogingen in de toekomst doden, daarom zal ik minder de voorkeur geven aan deze richting.
Als ik me voorstel dat ik een sterrenhemel wil maken op kale CSS, dan lukt het me allemaal niet, wantsterren zouden in willekeurige posities moeten verschijnen, en als ze vooraf gemaakte coördinaten hebben, zal het niet zo mooi en niet zo eenvoudig zijn, omdat je een generator voor willekeurige getallen in CSS kunt schrijven, maar dergelijke code ziet er volledig lelijk, onleesbaar en moeilijk uit begrijpen!