Beginnen Sie mit HTML-Canvas

Das HTML-Element ist eine leistungsstarke Lösung zum Erstellen pixelbasierter Grafiken im Web mithilfe von JavaScript und ermöglicht es Ihnen, mit ein wenig Übung einige bemerkenswerte Effekte zu erzielen.

In diesem Tutorial sehen wir uns an, wie Sie ein Canvas-Objekt erstellen, einfache visuelle Elemente darauf zeichnen und diese visuellen Elemente animieren.



01. Erstellen Sie eine Seite

Canvas ist im Grunde ein HTML-Element, das Sie auf der Seite platzieren, skalieren, um den gewünschten Bereich abzudecken, und auf das Sie dann zurückgreifen können. Um zu beginnen, müssen wir eine einfache Seite mit einem Canvas-Objekt erstellen.



HTML Canvas Demo

02. Skalieren Sie die Leinwand

Um uns viel Platz zum Spielen zu geben, möchten wir, dass unsere Leinwand den gesamten Bildschirm ausfüllt. Wir geben ihm auch einen schwarzen Hintergrund, damit Sie wissen, dass er definitiv da ist. Dies kann tatsächlich etwas schwierig sein, ohne dass Bildlaufleisten oder Leerzeichen entstehen. Das folgende CSS sollte sich darum kümmern.

canvas { height: 100vh; width: 100vw; position: absolute; background-color: #000000; } margin: 0; padding: 0; }

03. Initialisieren Sie die Zeichenfläche für die Verwendung

Als nächstes müssen wir JavaScript hinzufügen, um die Leinwand einsatzbereit einzurichten. Wir werden ein DOMContentLoaded-Ereignis abhaken lassen, um sicherzustellen, dass das Skript nicht versucht, ausgeführt zu werden, bevor das Canvas-Element fertig ist. Außerdem wird die Leinwandauflösung so eingestellt, dass sie dem abgedeckten Bereich entspricht. Andernfalls wird die Leinwand vergrößert, ohne die Auflösung zu erhöhen, was zu unscharfen oder pixeligen Grafiken führt.



document.addEventListener('DOMContentLoaded', function() { var canvas = document.getElementById('html-canvas'); var circles = []; var radius = 50; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; var context = canvas.getContext('2d'); }, false);

04. Zeichne eine Form

Sie werden feststellen, dass wir im letzten Schritt einen so genannten 'Kontext' erstellt haben. So erfolgt das Zeichnen auf Leinwand. Es ist am einfachsten, sich den Kontext als Pinsel vorzustellen, mit dem wir verschiedene Linien, Bögen und Grundformen zeichnen können.

Was wir jetzt tun können, ist, unseren Kontext zu nutzen, indem wir eine drawCircle-Funktion schreiben, die einen 360-Grad-Bogen erzeugt - das heißt einen Kreis. Dazu weisen wir den Kontext an, einen Bogen zu definieren, Stile für den Rand und die Füllung festzulegen und dann die Funktionen fill () und Stroke () zu erhöhen, um die Form tatsächlich zu zeichnen (Strich zeichnet den Rand).

function drawCircle(x, y, radius, border, border_colour, fill_colour) { context.beginPath(); context.arc(x,y,radius,0,2*Math.PI); context.strokeStyle = border_colour; context.fillStyle = fill_colour; context.lineWidth = border; context.closePath(); context.fill(); context.stroke(); }

05. Erstellen Sie viele Kreise

Großartig. Wir haben eine Funktion, die Kreise zeichnen kann. Jetzt brauchen wir etwas zum Zeichnen. Erweitern wir den Code aus Schritt 3, um ein Array zu erstellen, das Kreisobjekte beschreibt. Es speichert die x- und y-Koordinaten, die Farbe und einen Richtungswert jedes Kreises.



Wir erstellen diese Array-Struktur, anstatt nur Kreise sofort zu zeichnen, da wir so die Kreise animieren können, indem wir den Inhalt des Arrays später neu zeichnen.

for (var i = 0; i < 20; i++) { var x = radius + (Math.random() * (canvas.width - (2 * radius))); var y = radius + (Math.random() * (canvas.height - (2 * radius))); var colour = randomColour(); var direction = Math.random() * 2.0 * Math.PI; circles.push({x:x,y:y,colour:colour,direction:direction}); draw(); }

06. Randomisieren Sie die Farbe

Im letzten Schritt haben wir einige neue Funktionen verwendet, die noch nicht definiert wurden. Beginnen wir mit randomColour (). Dies ist eine Dienstprogrammfunktion, die eine zufällige hexadezimale Zeichenfolge zurückgibt, die eine Farbe darstellt. Die Implementierung ist ziemlich einfach.

function randomColour() { var chars = '0123456789ABCDEF'; var colour = '#'; for (var i = 0; i < 6; i++) { colour += chars[Math.floor(Math.random() * 16)]; } return colour; }

07. Zeichnen Sie die Grafiken auf der Seite

Jetzt können wir die Dinge zusammenführen, indem wir die Funktion draw () implementieren. Dies wird zwei wichtige Dinge tun. Zunächst wird die Zeichenfläche mit der Funktion clearRect () gelöscht. Dies ist wichtig, wenn wir unsere Kreise animieren, um zu vermeiden, dass der neue Rahmen über den alten gezogen wird. Anschließend durchläuft es das von uns erstellte Array und zeichnet nacheinander jeden Kreis auf der Leinwand mit unserer Funktion drawCircle.

function draw() { context.clearRect(0, 0, canvas.width, canvas.height); circles.forEach(function (circle) { drawCircle(circle.x, circle.y, radius, 5, circle.colour, circle.colour); }); }

08. Animieren Sie die Formen

Wenn Sie es jetzt ausprobieren, sehen Sie einige statische Kreise auf der Seite. Aber wir wollen sie animieren. Dazu müssen wir unsere draw () - Funktion auf verschiedene Arten erweitern. Zunächst verwenden wir den Wert circle.direction, den wir in das Array verschoben haben, um Änderungen der x- und y-Position für den Kreis zu berechnen.

Als Nächstes verwenden wir eine integrierte Funktion namens requestAnimationFrame, die die Funktion draw () rekursiv aufruft. Mit requestAnimationFrame kann der Browser entscheiden, wann die Funktion erneut aufgerufen werden soll, ohne dass Timer implementiert werden müssen, um zu berechnen, wann der nächste Frame gezeichnet werden soll.

function draw() { context.clearRect(0, 0, canvas.width, canvas.height); circles.forEach(function (circle) { circle.x = circle.x + Math.cos(circle.direction); circle.y = circle.y + Math.sin(circle.direction); drawCircle(circle.x, circle.y, radius, 5, circle.colour, circle.colour); }); requestAnimationFrame(draw); }

09. Bounce am Rand der Seite

Eines fehlt jedoch noch. Die Kreise verschwinden jetzt einfach vom Bildschirmrand. Lassen wir sie zurückspringen. Dazu fügen wir eine neue Funktion, bounce (circle), innerhalb der forEach-Schleife der draw () -Funktion auf.

Die Sprungfunktion bestimmt, wann sich ein Kreis am Rand des Bildschirms befindet, und passt seinen Richtungswert entsprechend an.

function bounce(circle) { if (((circle.x - radius) < 0) || ((circle.y - radius) canvas.width) || ((circle.y + radius) > canvas.height)) { circle.direction += (Math.PI / 2); } if (circle.direction > (2 * Math.PI)) { circle.direction -= (2 * Math.PI); } }

Dieser Artikel erschien ursprünglich in Webdesigner Ausgabe 266. Kaufen Sie es hier.

Zum Thema passende Artikel:

wie man besser zeichnen kann