Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Canvas von Grund auf neu: Transformationen und Verläufe

by
Read Time:12 minsLanguages:
This post is part of a series called Canvas From Scratch.
Canvas From Scratch: Advanced Drawing
Canvas From Scratch: Pixel Manipulation

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

In diesem Artikel werde ich Sie durch Transformationen in der Leinwand sowie durch Schatten und Verläufe führen. Transformationen sind äußerst wertvolle Methoden, mit denen Sie beim Zeichnen von Objekten auf der Leinwand kreativ werden können. Lass uns nach dem Sprung loslegen!


Einrichten

Sie werden dieselbe HTML-Vorlage aus den vorherigen Artikeln verwenden, also öffnen Sie Ihren bevorzugten Editor und fügen Sie den folgenden Code ein:

Hier haben wir nichts weiter als eine einfache HTML-Seite mit einem canvas-Element und etwas JavaScript, das ausgeführt wird, nachdem das DOM geladen wurde. Nichts Verrücktes.


Übersetzungen in Aktion

Übersetzen verschiebt im Wesentlichen das gesamte Koordinatensystem.

Eine der einfachsten Transformationen in Canvas ist translate. Auf diese Weise können Sie den Ursprungspunkt des 2D-Renderingkontexts verschieben; die (0, 0)-Position auf der Leinwand. Lassen Sie mich Ihnen zeigen, was das bedeutet.

Platzieren Sie zunächst ein Quadrat im Canvas an der Position (0, 0):

Es zeichnet sich selbst am oberen linken Rand der Leinwand. Trotzdem - hier ist nichts Ungewöhnliches.

A simple squareA simple squareA simple square

Versuchen Sie nun, den 2D-Rendering-Kontext zu übersetzen und ein weiteres Quadrat an derselben Position zu zeichnen:

Was denkst du wird passieren? Haben Sie einen goldenen Stern, wenn Sie erraten haben, dass das neue Quadrat an der Position (100, 100) gezeichnet wird. Keine Spielzeit für diejenigen, die falsch geraten haben. Es tut uns leid!

Translating a squareTranslating a squareTranslating a square

Was ist dann hier passiert? Was den Code zum Zeichnen des zweiten Quadrats betrifft, so haben Sie es an der gleichen Stelle wie das erste Quadrat gezeichnet. Der Grund dafür ist, dass Sie im Grunde das gesamte Koordinatensystem des Canvas verschoben haben, sodass seine Position (0, 0) nun an der Stelle (100, 100) liegt.

How translation worksHow translation worksHow translation works

Macht es jetzt ein bisschen mehr Sinn? Hoffentlich. Es kann eine Weile dauern, bis Sie sich zurechtfinden, aber es ist ein einfaches Konzept, wenn Sie es einmal verstanden haben.

Sie würden diese Transformation wahrscheinlich nicht allzu oft verwenden, da Sie einfach das zweite Quadrat bei (100, 100) zeichnen könnten, um den gleichen Effekt zu erzielen. Das Schöne an translate ist jedoch, dass Sie es mit anderen Transformationen kombinieren können, um einige ziemlich coole Dinge zu tun.

Werfen wir einen Blick auf die nächste Transformation auf der Liste.


Skalieren Sie Ihre Grafiken

Wie Sie wahrscheinlich schon vermutet haben, wird die scale-Transformation zur Größenänderung verwendet. Genauer gesagt wird die Skalierungstransformation verwendet, um den 2D-Rendering-Kontext zu skalieren.

Entfernen Sie den Code, an dem Sie mit dem translate beispiel gearbeitet haben, und fügen Sie den folgenden Code hinzu:

Dadurch wird an der Position (100, 100) ein Standardquadrat mit einer Breite und Höhe von 100 Pixeln gezeichnet. Wie skalieren wir das?

A simple squareA simple squareA simple square

Skalierungseigenschaften sind Multiplikatoren für die x- und y-Dimensionen.

Die scale-Transformation wird auf ähnliche Weise zum translate verwendet, da sie aufgerufen wird, bevor Sie die Objekte zeichnen, auf die sie angewendet werden soll. Es ist wichtig, darauf hinzuweisen, dass die Eigenschaften im scale Multiplikatoren für die x- und y-Dimensionen sind. Dies bedeutet, dass eine scale von (1, 1) die Größe des 2D-Rendering-Kontexts mit eins multiplizieren würde, sodass er die gleiche Größe wie zuvor belassen würde. Eine scale von (5, 5) würde die Größe des 2D-Rendering-Kontexts mit fünf multiplizieren, was ihn fünfmal größer macht als zuvor. Einfach.

In Ihrem Fall möchten Sie die Größe des Quadrats verdoppeln, also wenden Sie eine scale von (2, 2) an:

Daraus ergibt sich ein Quadrat, das doppelt so groß ist:

Scaling a squareScaling a squareScaling a square

Beachten Sie jedoch, dass das Quadrat jetzt an einer anderen Position gezeichnet wird als vor der scale. Der Grund dafür ist, dass die scale die Größe von allem im 2D-Rendering-Kontext multipliziert, einschließlich der Koordinaten. In Ihrem Fall wird die Position (100, 100) jetzt zu (200, 200); die Koordinaten sind doppelt so groß wie ohne Skalierung.

Um dies zu umgehen, können wir eine translate durchführen, die den Ursprung des 2D-Rendering-Kontexts an die Position verschiebt, an der Sie das Quadrat zeichnen möchten. Wenn Sie dann eine scale anwenden und das Quadrat an Position (0, 0) zeichnen, wird seine Position nicht verschoben:

Daraus ergibt sich ein Quadrat, das doppelt so groß ist wie das Original, das aber an der gleichen Position wie das Original gezeichnet wird:

Scaling and translating squareScaling and translating squareScaling and translating square

Es ist wirklich hilfreich, sich dieser kleinen Macken in Transformationen bewusst zu sein, wenn man sie verwendet. Die meisten der häufigsten Probleme bei Transformationen scheinen darauf zurückzuführen zu sein, dass nicht vollständig verstanden wird, wie sie funktionieren.


Rotierende Elemente

Bisher waren alle Transformationen, mit denen Sie sich befasst haben, ziemlich unaufregend. Glücklicherweise ist die rotate-Transformation hier, um den Tag zu retten, und sie ist leicht mein Favorit unter den Leuten.

Ich bin mir sicher, dass das rotate keine Einführung erfordert, also springen wir direkt hinein und drehen ein Quadrat um 45 Grad (denken Sie daran, dass Grad im Bogenmaß angegeben werden muss):

Die ein Quadrat bei (100, 100) positioniert und sich dreht.. woah, warte! Das sieht nicht richtig aus:

Rotating a squareRotating a squareRotating a square

Sehen Sie, was passiert ist? Das Quadrat scheint zu versuchen, dem Browserfenster zu entkommen, anstatt sich auf der Stelle an der Position (100, 100) zu drehen. Dies liegt daran, dass sich das rotate wie alle Transformationen auf den gesamten 2D-Rendering-Kontext und nicht auf einzelne Objekte auswirkt.

Hier ist eine Illustration, was mit dem Koordinatensystem passiert, wenn Sie eine 45-Grad-rotate durchführen:

How rotation worksHow rotation worksHow rotation works

Beachten Sie, wie sich das gesamte Koordinatensystem um 45 Grad vom Ursprungspunkt (0, 0) gedreht hat? Dies führte dazu, dass das Quadrat so aussah, als würde es aus dem Browserfenster entkommen, einfach weil die Position (100, 100) um den Rand des Browsers herum gedreht wurde.

Die einfache Möglichkeit, dieses Problem zu umgehen, besteht darin, rotate mit translate zu kombinieren, wie folgt:

Das Durchführen der translate verschiebt den Ursprungspunkt des 2D-Rendering-Kontexts (0, 0) zu dem, was der Mittelpunkt des Quadrats sein sollte (150, 150). Dies bedeutet, dass jede Drehung jetzt um die Position (150, 150) herum basiert. Wenn Sie dann ein Quadrat mit einer negativen x- und y-Position zeichnen, die der Hälfte der Breite und Höhe des Quadrats entspricht, zeichnen Sie am Ende ein Quadrat, das aussieht, als wäre es um seinen Mittelpunkt gedreht:

Rotating and translating a squareRotating and translating a squareRotating and translating a square

Die rotate-Transformation ist wahrscheinlich die am schwierigsten zu verstehende von allen. Denken Sie daran, dass Transformationen für den gesamten 2D-Rendering-Kontext ausgeführt werden. Wenn Sie eine Form um ihren Mittelpunkt drehen möchten, müssen Sie rotate mit translate kombinieren.

Kommen wir zu etwas visuell Beeindruckenderem.


Schatten hinzufügen

Das Hinzufügen von Schatten zu Objekten ist wunderbar einfach.

Canvas wird mit einigen Eigenschaften geliefert, um das Aussehen der darauf gezeichneten Objekte zu manipulieren, und ein Satz dieser Eigenschaften ermöglicht es Ihnen, Schatten hinzuzufügen.

Das Hinzufügen von Schatten zu Objekten ist herrlich einfach. Es erfordert lediglich, dass die shadowColor-Eigenschaft im 2D-Rendering-Kontext auf eine Farbe festgelegt wird, die kein transparentes Schwarz ist, und eine der shadowBlur-, shadowOffsetX- oder shadowOffsetY-Eigenschaften muss auf einen anderen Wert als 0 festgelegt werden.

Probieren Sie den folgenden Code aus:

Dadurch erhält der Schatten eine Unschärfe von 15 Pixeln und setzt die Farbe auf einfarbiges Schwarz:

Adding a blurred shadowAdding a blurred shadowAdding a blurred shadow

Bisher ganz normales Zeug.

Wenn Sie shadowBlur auf 0 setzen, ändern Sie shadowColor in ein helles Grau und geben Sie einen positiven shadowOffsetX und shadowOffsetY:

Am Ende erhalten Sie einen durchgehenden Schatten, der leicht rechts und unterhalb des gezeichneten Objekts erscheint:

Adding a solid shadowAdding a solid shadowAdding a solid shadow

So cool Schatten auch sind, sie können ein bisschen ein Ressourcenfresser sein.

Beachten Sie, dass Schatten sich auf alles auswirken, was nach ihrer Definition gezeichnet wird. Daher ist es nützlich, die Methoden save und restore zu verwenden, damit Sie die Schatteneigenschaften nicht zurücksetzen müssen, nachdem Sie sie verwendet haben.

Beachten Sie, dass die Leistung leiden kann, wenn Sie viele, viele Objekte gleichzeitig mit einem Schatten versehen. In einigen Fällen kann es sinnvoll sein, ein PNG-Bild mit Schatten zu verwenden, anstatt ein Objekt manuell zu zeichnen und mithilfe von Code einen dynamischen Schatten anzuwenden. Wir werden in der nächsten Folge dieser Serie behandeln, wie man Bilder mit Leinwand verwendet.


Verläufe erstellen

Sie können zwei Arten von Farbverläufen im Canvas erstellen - linear und radial.

Die letzten Funktionen, die ich in diesem Tutorial mit Ihnen behandeln möchte, sind Farbverläufe. Es gibt zwei Arten von Farbverläufen in der Leinwand, die erste sind lineare (gerade) Farbverläufe. Sie können einen linearen Farbverlauf mit der Methode createLinearGradient erstellen (überraschenderweise), die in Pseudocode wie folgt aussieht:

Der erste Satz von zwei Argumenten ist die x- und y-Position des Anfangs des Farbverlaufs, und der zweite Satz von Argumenten ist die x- und y-Position des Endes des Farbverlaufs. Es ist auch wichtig, darauf hinzuweisen, dass ein Farbverlauf in der Arbeitsfläche eigentlich eine Art von Farbwert ist, sodass Sie ihn auf die Eigenschaften fillStyle und strokeStyle anwenden.

Hier ist ein Beispiel dafür, wie Sie einen linearen Farbverlauf erstellen, der vom oberen Rand der Leinwand bis ganz nach unten verläuft:

Beachten Sie, wie Sie den Farbverlauf einer Variablen zuweisen und dann diese Variable verwenden, um die Methode addColorStop aufzurufen. Mit dieser Methode können Sie die Farbe an bestimmten Punkten entlang des Verlaufs festlegen. Die Position 0 würde beispielsweise den Beginn des Farbverlaufs darstellen (die erste x- und y-Position) und 1 das Ende des Farbverlaufs (die zweite x- und y-Position). Sie können auch Dezimalpunkte zwischen 0 und 1 verwenden, um eine Farbe an einer anderen Stelle entlang des Verlaufs zuzuweisen, z. B. 0,5 wäre auf halbem Weg.

Durch Anwenden der Verlaufsvariablen auf die fillStyle-Eigenschaft erhalten Sie einen schönen Farbverlauf, der von Weiß (an Position 0 oben auf der Leinwand) zu Schwarz (an Position 1 unten auf der Leinwand) geht:

Creating a linear gradientCreating a linear gradientCreating a linear gradient

Aber Sie müssen nicht immer lineare Farbverläufe verwenden; Sie können auch radiale Farbverläufe erstellen!

Radiale Farbverläufe werden mit der Methode createRadialGradient erstellt, die in Pseudocode wie folgt aussieht:

Der erste Satz von drei Argumenten ist die x- und y-Position sowie der Radius des Kreises am Anfang des Gradienten, wobei die letzten drei Argumente die x- und y-Position sowie den Radius des Kreises am Ende von darstellen die Steigung.

Klingt verwirrend, oder? Es ist ein bisschen, also lassen Sie uns einsteigen und einen radialen Farbverlauf erstellen, um zu sehen, was passiert:

Sie haben einen radialen Farbverlauf erstellt, der einen Startpunkt bei (350, 350) mit einem Radius von 0 und einen Endpunkt bei (50, 50) mit einem Radius von 100 hat. Können Sie sich vorstellen, wie das aussehen wird? 20 Punkte, wenn Sie vermuten, dass es so aussehen würde:

Creating a radial gradientCreating a radial gradientCreating a radial gradient

Wenn Sie mir ähnlich sind, habe ich das nicht erwartet. Ich habe bereits in Anwendungen wie Adobe Photoshop radiale Farbverläufe verwendet, und sie sehen nicht danach aus! Warum sieht es dann so aus? Nun, so soll es seltsamerweise aussehen.

Sehen Sie sich dieses Diagramm an, das genau zeigt, wie ein radialer Farbverlauf im Canvas funktioniert:

How radial gradients workHow radial gradients workHow radial gradients work

Interessant, nicht wahr? Grundsätzlich können Sie eine Kegelform erstellen, aber was ist, wenn Sie einen richtigen radialen Verlauf wie den in Photoshop erstellen möchten? Zum Glück ist es einfach.

Um einen richtigen radialen Farbverlauf zu erstellen, müssen Sie nur die beiden Kreise des Farbverlaufs an genau derselben x- und y-Position platzieren und sicherstellen, dass einer der Farbverlaufskreise größer ist als der andere:

Der obige Code erstellt einen radialen Farbverlauf, der sich in der Mitte der Leinwand befindet. Einer der Kreise im Verlauf hat einen Radius von 0, während der andere einen Radius von 250 hat. Das Ergebnis ist ein traditioneller radialer Farbverlauf, der sich von der Mitte der Leinwand nach außen bewegt, wie folgt:

Creating a radial gradientCreating a radial gradientCreating a radial gradient

Das sieht besser aus! Ich war ehrlich gesagt erstaunt, als ich sah, wie radiale Farbverläufe in Canvas implementiert wurden. Ich wette, es hat viele Leute zum Stolpern gebracht, wenn sie diese Kegelform sehen. Na ja, zumindest wissen Sie jetzt, wie man richtige erstellt.

Es ist erwähnenswert, dass Farbverläufe in der Leinwand ebenfalls recht intensive Vorgänge sind. Wenn Sie die gesamte Leinwand mit einem Farbverlauf abdecken möchten, würde ich zunächst in Betracht ziehen, einen CSS3-Farbverlaufshintergrund auf das Leinwandelement selbst anzuwenden.


Einpacken

In diesem Artikel haben wir überprüft, wie grundlegende Transformationen auf der Leinwand durchgeführt werden, einschließlich Translationen, Skalierung und Rotation. Sie haben auch gelernt, wie man Objekten Schatten hinzufügt und wie man Farbverläufe erstellt. Es klingt nicht nach viel, aber insbesondere Transformationen bilden das Rückgrat einiger der coolsten Sachen, die mit Leinwand erreicht werden können.

Im nächsten Eintrag in "Canvas from Scratch" werden wir uns vom Zeichnen von Objekten lösen und einen Blick darauf werfen, wie man Bilder und Videos auf der Leinwand manipuliert. Hier wird es richtig interessant! Bleiben Sie dran!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.