JavaScript: Tegn en prik

Lad os lære, hvordan man tegner et punkt i JavaScript i en browser.. det er ikke teknisk svært, men kun for dem, der fumler, og for dem, der ikke er parate til at tegne et punkt på internettet - det er selvfølgelig en hel præstation.

Der er mange måder at tegne et punkt på, lad os se på dem

Spilkonstruktører



Ved at bruge Unity/Godot/microStudio eller en af ​​de tusindvis af spilbyggere.. vil de alle skabe en eller anden kode på den ene eller anden måde, der vil være JavaScript eller Webassembly, og stadig vise os pointen.Vi er ikke interesserede i denne vej.vi vil ikke rigtig forstå hvad der sker, kontrol over koden vil være minimal og ulæselig i kildekoden, udover at den er enorm.

JavaScript-rammer

Denne Jedi-vej er så tæt på os som muligt, fordi.vores kode vil ikke være stor og klar som dag, vi vil ikke abstrahere meget, vi vil ikke øge vores kode i høj grad med biblioteker.Kodekontrol ville også være fantastisk

Ren JavaScript

Dette er selvfølgelig Jediernes måde.Koden er så kompliceret som muligt, den maksimale kontrol over ting, som sådan set ikke skal kontrolleres.Kildekoderne er de mest minimale og med kendskab til golimy JavaScript kan vi bare trygt gå hen for at få et job, pga.vi har brug for sådanne mennesker.

Men vores opgave er ikke at finde et job, men at tegne en prik på en enkel og nem måde.Vores vektor er hastighed og fleksibilitet.

Jeg valgte biblioteket

p5js at tegne en prik.Det er ikke kun det, selvfølgelig, hvis opgaven var at tegne en pointe, og det er det, skulle alt selvfølgelig gøres i bare JavaScript, men jeg gør dette i perspektiv, .k.så laver du og jeg andre ting, der vil se fantastiske ud, og til dette har vi brug for et godt værktøj.En af dem er p5js.

I golim JavaScript skal vi lave et lærred for at definere initialiserings- og gentegningsfunktionerne, i p5 gøres dette også, men meget kortfattet.

Men først..

Minimum miljøopsætning til JavaScript-udvikling

Hent

p5.min.js og hold det side om side.

sådan her

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);
    }

Dette vil åbne op i din browser sådan her:

Nå, HTML er forståeligt, men hvilken slags JavaScript-kode er dette?

opsætningsfunktionen er initialisering, den udføres én gang, i den skaber vi et lærred, dvs.område, hvor vi vil tegne et punkt.vindue.indreBredde, vindue.indreHøjde

er skærmens bredde og højde, dvs.vi definerer et fuldskærms lærred, og ja, HTML har også en meget vigtig stil til dette

<body style="margin: 0px;">

Vi behøver ikke at initialisere noget andet, vi skal bare tegne en prik.Se på princippet her .. tegnefunktionen udføres f.eks. 60 gange i sekundet, og 60 gange i sekundet vil vi tegne vores punkt .. det ser ud til, at det er dumt, vi skal bare tegne et punkt, og det er det, men i fremtiden vil det være grundlaget for generel al animation.

Generelt er koden til at tegne et punkt ekstremt enkel:

point(10,10)

og det er det!

Vores kode er dog lidt større

  background(0);
  stroke('white');
  strokeWeight(10);
  point(window.innerWidth/2,window.innerHeight/2);

baggrund sort

hvid stjerne

prik tykkelse 10

og vi tegner det i midten af ​​lodret og vandret.

Tja.. vi tegnede en prik på lærredet, alt er som det skal være, men vi kunne endda tegne det på ren HTML uden noget JavaScript. Hvordan ville det se ud?

Det gør det elementært og endnu nemmere, men principperne er helt anderledes, her er den endelige kode til at tegne en firkant i midten af ​​skærmen

<!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>

Resultatet er næsten det samme

Ja, det er ret nemt at tegne noget i midten i HTML, men for at tilføje animationer, og endnu mere en fornuftig interaktiv, bliver du nødt til at tænke efter principperne for CSS.Selvom det er en ganske interessant opgave.Kun én elementær ting dræber alt dette, der er ingen tilfældige tal i CSS, dette vil dræbe alle vores forsøg i fremtiden, hvorfor jeg vil give mindre præference til denne retning.

Hvis jeg forestiller mig, at jeg vil lave en stjernehimmel på bar CSS, så vil alt ikke fungere for mig, fordistjerner skal dukke op i tilfældige positioner, og hvis de har foruddefinerede koordinater, vil det ikke være så smukt og ikke så enkelt, fordi du kan skrive en tilfældig talgenerator i CSS, men sådan en kode vil se fuldstændig grim, ulæselig og svær at forstå!



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