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