JavaScript: teken een punt

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

Spelbouwers



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.

JavaScript-frameworks

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

Zuiver JavaScript

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!



bg bs ca ceb co cs cy da de el en eo es et fa fi fr fy ga gd gl gu ha haw hi hmn hr ht hu id ig is it iw ja jw ka kk km kn ko ku ky la lb lo lt lv mg mi mk ml mn mr ms mt my ne nl no ny or pa pl ps pt ro ru rw sd si sk sl sm sn so sr st su sv sw ta te tg th tk tl tr tt ug uk ur uz vi xh yi yo zh zu
Text to speech
QR-Code generator
Parsedown cheatsheet. Markdown
Filter data by column with regular expressions
Engines for creating games on LUA ?
JavaScript: draw a point
JavaScript: Speaking text in Chinese