JavaScript: Zeichne einen Punkt

Lassen Sie uns lernen, wie man einen Punkt in JavaScript in einem Browser zeichnet.. es ist technisch nicht schwierig, aber nur für diejenigen, die herumfummeln, und für diejenigen, die nicht bereit sind, einen Punkt im Internet zu zeichnen - das ist natürlich eine ganze Leistung.

Es gibt viele Möglichkeiten, einen Punkt zu zeichnen, schauen wir sie uns an

Spiele-Konstrukteure



Unter Verwendung von Unity/Godot/microStudio oder einem der Tausenden von Spieleentwicklern … werden sie alle auf die eine oder andere Weise Code erstellen, der JavaScript oder Webassembly sein wird, und uns trotzdem den Punkt zeigen.Dieser Weg interessiert uns nicht.Wir werden nicht wirklich verstehen, was passiert, die Kontrolle über den Code wird minimal und im Quellcode nicht lesbar sein, außerdem ist er riesig.

JavaScript-Frameworks

Dieser Weg der Jedi ist uns so nahe wie möglich, denn.Unser Code wird nicht groß und klar wie der Tag sein, wir werden nicht viel abstrahieren, wir werden unseren Code nicht stark mit Bibliotheken erweitern.Codekontrolle wäre auch toll

Reines JavaScript

Das ist natürlich der Weg der Jedi.Der Code ist so kompliziert wie möglich, die maximale Kontrolle über Dinge, die sozusagen nicht kontrolliert werden müssen.Die Quellcodes sind die minimalsten und mit den Kenntnissen von golimy JavaScript können wir einfach sicher gehen, um einen Job zu bekommen, weil.Wir brauchen solche Leute.

Aber unsere Aufgabe ist es nicht, einen Job zu finden, sondern auf einfache und einfache Weise einen Punkt zu ziehen.Unser Vektor ist Schnelligkeit und Flexibilität.

Ich habe mich für die Bibliothek entschieden

p5js einen Punkt zu zeichnen.Es ist natürlich nicht nur so, wenn es darum geht, einen Punkt zu zeichnen und das war's, müsste natürlich alles in nacktem JavaScript gemacht werden, aber ich mache das perspektivisch, .k.dann werden Sie und ich andere Dinge tun, die fantastisch aussehen werden, und dafür brauchen wir ein gutes Werkzeug.Einer von ihnen ist p5js.

In golim JavaScript müssen wir eine Leinwand erstellen, um die Initialisierungs- und Neuzeichnungsfunktionen zu definieren, in p5 wird dies auch getan, aber sehr prägnant.

Aber zuerst..

Minimale Umgebungseinrichtung für die JavaScript-Entwicklung

Herunterladen

p5.min.js und halte es nebeneinander.

so

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

Dies öffnet sich in Ihrem Browser wie folgt:

Nun, HTML ist verständlich, aber was ist das für ein JavaScript-Code?

Die Setup-Funktion ist die Initialisierung, sie wird einmal ausgeführt, darin erstellen wir eine Leinwand, d.h.Bereich, in dem wir einen Punkt zeichnen werden.Fenster.innere Breite, Fenster.innere Höhe

ist die Breite und Höhe des Bildschirms, d.h.Wir definieren eine Vollbild-Leinwand und ja, HTML hat auch dafür einen sehr wichtigen Stil

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

Wir müssen nichts weiter initialisieren, wir müssen nur einen Punkt zeichnen.Sehen Sie sich das Prinzip hier an. Die Zeichenfunktion wird beispielsweise 60 Mal pro Sekunde ausgeführt, und 60 Mal pro Sekunde werden wir unseren Punkt zeichnen. Es scheint, dass dies dumm ist, wir müssen nur einen Punkt zeichnen und fertig es, aber in Zukunft wird es die Grundlage für die allgemeine Animation sein.

Im Allgemeinen ist der Code zum Zeichnen eines Punktes extrem einfach:

point(10,10)

und alle !

Unser Code ist jedoch etwas größer

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

Hintergrund schwarz

weißer Stern

Punktstärke 10

und wir zeichnen es in der Mitte der Vertikalen und Horizontalen.

Nun, wir haben einen Punkt auf die Leinwand gezeichnet, alles ist so, wie es sein sollte, aber wir könnten ihn sogar in reinem HTML ohne JavaScript zeichnen. Wie würde er aussehen?

Es macht es elementar und noch einfacher, aber die Prinzipien sind völlig anders, hier ist der endgültige Code zum Zeichnen eines Quadrats in der Mitte des Bildschirms

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

Das Ergebnis ist fast das gleiche

Ja, es ist ziemlich einfach, in HTML etwas in der Mitte zu zeichnen, aber um Animationen hinzuzufügen, und noch mehr eine vernünftige Interaktion, müssen Sie nach den Prinzipien von CSS denken.Obwohl es eine ziemlich interessante Aufgabe ist.Nur eine elementare Sache killt das alles, es gibt keine Zufallszahlen in CSS, das wird in Zukunft alle unsere Versuche killen, weshalb ich dieser Richtung weniger den Vorzug geben werde.

Wenn ich mir vorstelle, dass ich auf nacktem CSS einen Sternenhimmel machen möchte, dann wird bei mir nicht alles klappen, weilSterne sollten an zufälligen Positionen erscheinen, und wenn sie vorgefertigte Koordinaten haben, wird es nicht so schön und nicht so einfach, weil Sie einen Zufallszahlengenerator in CSS schreiben können, aber solcher Code sieht völlig hässlich, unlesbar und schwer zu lesen aus verstehen!



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