Regencode machen - Matrix Style

Eine Einführung in HTML 5-Canvas-Animationen

Von all den großartigen Dingen, die uns HTML 5 gebracht hat, liebe ich das Canvas-Element am meisten. Ich hoffe, wenn Sie erst einmal gesehen haben, wie leistungsfähig es ist, sollten Sie sich die Zeit nehmen, um Leinwandanimationen selbst zu beherrschen.

Was ist eine Leinwand?

Eine Leinwand ist genau das, was ihr Name impliziert. Es ist eine leere Leinwand, die Sie nach Belieben malen und dann in Ihrem Browser als Bild rendern können. Die wahre Schönheit besteht darin, dass Sie damit nicht nur Bilder erstellen, sondern diese auch kontinuierlich neu zeichnen und rendern können - und so eine Animation erstellen können.

Die Kraft der Leinwand ist nur durch Ihre Vorstellungskraft begrenzt. Ich habe das Canvas-Element verwendet, um alles zu erstellen, von statischen Bildern im laufenden Betrieb bis hin zu Spielen und grafischen Benutzeroberflächen. und sogar einen E-Mail-Builder im MailChimp-Stil. Sie können die Leinwand sogar in 3D rendern!

Für mich hat das Canvas-Element alles verändert. Ich war nicht mehr auf die Verwendung der Standard-HTML-Tags beschränkt. Ich konnte im Browser alles erstellen, was ich wollte. Und Sie sollten besser glauben, dass dies meine JavaScript-Fähigkeiten auf ein ganz neues Niveau gebracht hat.

Loslegen

Anstatt zu demonstrieren, wie man einfach auf eine Leinwand zeichnet, möchte ich Ihnen einen Einblick geben, was Sie damit erstellen können. Wenn Sie The Matrix noch nicht gesehen haben, hören Sie jetzt auf zu lesen und schauen Sie es sich an. Wenn Sie es gesehen haben, erkennen Sie den berühmten „fallenden Code“ am Titel. Lassen Sie uns dies mit Leinwand erstellen!

Anstatt ein schrittweises Tutorial zu machen, werde ich, um Zeit zu sparen, den folgenden Code veröffentlichen und Sie durch das Tutorial führen, um zu erklären, was jedes Stück im weiteren Verlauf tut.

Der HTML:

Das CSS:

body{ background-color:#d2d2d2;}#canvas{ background-color:#000; display:block; margin:auto;}#logo{ display:none;}

Das JavaScript:

var canvas = document.getElementById(‘canvas’);var ctx = canvas.getContext(‘2d’);var t = text();var logo = document.getElementById(‘logo’);var lines = [];window.setInterval(draw, 100);
function draw() { if (Math.floor(Math.random() * 2) === 0 && lines.length < 100) { lines.push(new textLine()); } ctx.clearRect(0, 0, canvas.width, canvas.height); lines.forEach(function(tl) {
 ctx.drawImage(tl.text, tl.posX, tl.animate(), 20, 1000); }); ctx.drawImage(logo, 100, 155, 400, 70);
}
function textLine() { this.text = t; this.posX = (function() { return Math.floor(Math.random() * canvas.width); })(); this.offsetY = -1000; this.animate = function() { if (this.offsetY >= 0) { this.offsetY = -1000; } this.offsetY += 10; return this.offsetY; };}
function text() { var offscreenCanvas = document.createElement(‘canvas’); offscreenCanvas.width = “30”; offscreenCanvas.height = “1000”; offscreenCanvas.style.display = “none”; document.body.appendChild(offscreenCanvas); var octx = offscreenCanvas.getContext(‘2d’); octx.textAlign = “center”; octx.shadowColor = “lightgreen”; octx.shadowOffsetX = 2; octx.shadowOffsetY = -5; octx.shadowBlur = 1; octx.fillStyle = ‘darkgreen’; octx.textAlign = “left”; var step = 10; for (i = 0; i < 100; i++) { var charCode = 0; while (charCode < 60) { charCode = Math.floor(Math.random() * 100); } octx.fillText(String.fromCharCode(charCode), 0, step); step += 10; } return offscreenCanvas;}

Wie funktioniert es?

In Zeile 1 erfassen wir das Canvas-Element anhand seiner ID. Jedes Canvas-Element hat seinen eigenen Kontext - eine Schnittstelle zum Bearbeiten seines Inhalts. Darauf bezieht sich die Variable ctx in Zeile 2.

Um den animierten Hintergrund zu erstellen, benötigen wir eine vertikale Linie aus zufälligem Text, die wir dann mehrmals über die X-Achse neu zeichnen und schrittweise auf der Y-Achse animieren, um den Endeffekt zu erzielen.

Da Text immer horizontal gerendert wird, wird der Text auf einer anderen unsichtbaren Leinwand gerendert und als Bild auf unsere ursprüngliche Leinwand gezeichnet.

In Zeile 3 setzen wir die Variable t auf das Ergebnis der Funktion text () , die unser unsichtbares Canvas-Element generiert und zurückgibt.

In dieser Funktion erstellen wir eine neue Zeichenfläche, legen ihre Breite und Höhe fest und setzen ihre Anzeigeeigenschaft auf none, um sie auszublenden und dann an den Dokumentkörper anzuhängen. Dann legen wir die Farbe, den Schatten und den Versatz für den Text fest, den wir zeichnen werden.

Um vertikale Zufallszeichen zu erzeugen, schleifen und zeichnen wir ein neues Zufallszeichen 100 Mal und erhöhen es in jedem Intervall um 10 Pixel auf der Y-Achse. Um ein zufälliges Zeichen zu generieren, verwende ich Math.random () , um eine Zahl zwischen 60 und 100 zu erhalten, und konvertiere sie dann mit String.fromCharCode () in ein Zeichen .

Dadurch wird unser vertikaler Text mit einem Schatten gezeichnet und die Zeichenfläche an die Variable t zurückgegeben.

Die Animationsschleife

In den nächsten drei Codezeilen rufe ich das FreeCodeCamp-Logo ab, deklariere ein Array, das die separaten Zeilen enthält, aus denen der Hintergrund besteht, und verwende window.setInterval , um die Funktion draw () alle 100 Millisekunden auszuführen .

Wenn Sie eine Leinwand animieren, empfiehlt es sich, lieber window.requestAnimationFrame () zu verwenden, aber ich fand, dass dies für Anfänger zu verwirrend ist, da es etwas schwierig ist, die Bildrate einzustellen.

Die Funktion draw () generiert zunächst eine Zufallszahl zwischen 1 und 0. Wenn die Zahl 0 ist und weniger als 100 einzelne Textzeilen im Hintergrund animiert werden, wird eine neue textLine () in das Zeilenarray verschoben .

Die Funktion textLine () gibt ein Objekt zurück, das enthält

  1. Der resultierende vertikale Text, der in der Variablen t enthalten ist.
  2. Der Versatzbetrag, der auf der X-Achse gerendert wird (zufällig auf jeder Instanz des Objekts generiert).
  3. Ein anfänglicher Versatz von -1000 Pixel auf der Y-Achse, der ihn direkt über der Leinwand platziert.
  4. Eine Animationsmethode, die bei jedem Aufruf der Y-Achse 10 Pixel hinzufügt und das Ergebnis zurückgibt, sodass sich der Text nach unten bewegt. Wenn der Versatz der Y-Achse 0 erreicht, wird er auf -1000 Pixel zurückgesetzt, um eine kontinuierliche Animation bereitzustellen.

Die Leinwand wird gelöscht, und dann die draw () Funktion Schleifen durch jede Textzeile in dem Zeilen - Array und zieht es auf der Leinwand seines Aufruf belebtes Verfahren jedesmal , wenn eine Linie gezogen wird , es nach unten zu bewegen.

Da jede Zeile einen zufälligen Versatz auf der X-Achse hat und in zufälligen Abständen eine neue Zeile hinzugefügt wird, fallen die Textzeilen mit unterschiedlicher Geschwindigkeit über die Leinwand, wodurch der Regencode-Effekt entsteht!

Zuletzt wird das FreeCodeCamp-Logo über den Hintergrund gezeichnet, wodurch wir unsere endgültige Animation erhalten.

Wohin jetzt?

Wenn Sie sich für Canvas interessieren, können Sie in den Mozilla Docs mehr darüber erfahren.

Ich habe vor, eine Reihe grundlegenderer Schritt-für-Schritt-Anleitungen zu erstellen, die durch Leinwandanimationen gehen, wenn ich die Zeit finde.

Wenn Sie den obigen Code nicht zu schwierig fanden und sich damit anlegen möchten, finden Sie hier einige coole Ideen:

  1. Machen Sie die Bemaßungen dynamisch, sodass die Leinwand skaliert und weiter animiert wird, wenn Sie die Größe Ihres Browsers ändern.
  2. Anstatt zufällig Zeichen zu generieren, holen Sie sich eine Datei mit Ihrem eigenen Code von GitHub und animieren Sie diese stattdessen.
  3. Render your name in place of the FreeCodeCamp logo, and make it look like the Matrix poster.
  4. Instead of generating each line at random, bind a click event to the canvas and render a new line at the X coordinates of your mouse click.

I hope you enjoyed this intro, if you did feel free to check out some of the other articles that I’ve written.

Turning code to cash — How to make money as a Web Developer and live to tell the tale.

So you just learnt to code. You’re eager and anyone who can’t code thinks you’re a genius, word gets out and all of a…medium.comHow to write a jQuery like library in 71 lines of code — Learn about the DOM

JavaScript frameworks are all the rage. Chances are that any JavaScript related news feed you open will be littered…medium.com5 Things to Remember When You’re Learning to Program

Learning to program is challenging. Aside from choosing a language or setting up a development environment that you…medium.comHow I Became a Programmer. And When I Started Calling Myself One

I’ve wanted to start blogging about programming for months now and like so many others before me I set off full of…medium.comPreventative Programming — how fix to bugs before they happen

…and why Sherlock Holmes would have been a brilliant programmermedium.com