HTML5-Lernprogramm: Zeichnen Sie Text auf Leinwand mit ausgefallenen Farben, Verläufen und Effekten

Inhalt

• Grundlagen des Textzeichnens in HTML5
• Zeichnen von Text mit Schatten auf HTML5-Leinwand
• Zeichnen von Text mit Farbverlauf auf HTML5-Leinwand
• Drehen von Text auf HTML5-Leinwand
• Weitere Möglichkeiten zur Verwendung von HTML5

Simeon Visser ist ein Schriftsteller, der gerne Themen wie Technologie und Reisen behandelt.

In diesem Tutorial werde ich verschiedene Effekte behandeln, die Sie beim Zeichnen von Text auf einer HTML5-Zeichenfläche verwenden können. Einige davon erinnern Sie an die bekannten WordArt-Effekte von Microsoft Word! Dieses Tutorial baut darauf auf Mein anderes Tutorial über die Grundlagen des Zeichnens auf einer HTML5-Leinwand. Dieser vorherige Artikel erläutert die Bedeutung des HTML5-Codes und behandelt andere Grundlagen der HTML5-Zeichenfläche, z. B. das Koordinatensystem.

In HTML5 können Sie Ihrem Text ein ausgefallenes Aussehen verleihen, indem Sie einen Schatten und einen Farbverlauf hinzufügen und den Text drehen. Wir werden jeden dieser Effekte üben, und wenn Sie sie kombinieren, wird es sehr schön aussehen.

Beginnen wir mit einer einfachen leeren HTML5-Webseite:

! DOCTYPE html> html> head> meta http-equiv = "Inhaltstyp" content = "text / html; charset = UTF-8"> title> HTML5-Tutorial: Textzeichnung mit ausgefallenen Farben und Effekten / title> / head> body> canvas id = "mycanvas" width = "300" height = "300"> / canvas> script type = "text / javascript"> var canvas = document.getElementById ('mycanvas'); var ctx = canvas.getContext ('2d'); / script> / body> / html>

Grundlagen des Textzeichnens in HTML5

Sie können Text an einer bestimmten Stelle auf der Leinwand mit StrokeText oder FillText zeichnen. Wie beim Zeichnen von Formen zeichnet der StrokeText nur den Umriss des Textes und fillText färbt auch das Innere des Textes. Diese Befehle verwenden drei Argumente: den Text selbst, die x-Koordinate, wo der Text gezeichnet werden soll, und die y-Koordinate. Für den Anfang sind die Koordinaten ungefähr die untere linke Ecke des Feldes, das den Hauptteil des Textes umgibt. Sie können es als Ausgangspunkt der Linie anzeigen, auf der die Textzeichen gezeichnet werden. Dies zu diskutieren wäre ein Thema für sich und würde den Rahmen dieses Tutorials sprengen.

Wir können die Schriftart mithilfe des Schriftattributs des Kontexts angeben:

ctx.font = "fett 36px serifenlos";

Dies ist eine Textbeschreibung der Schriftart, die zum Zeichnen des Textes verwendet werden soll. Sie können den Stil (fett / kursiv), die Größe (36 Pixel) und den Namen der Schriftart oder Schriftfamilie (in diesem Fall die serifenlose Schriftfamilie) angeben. Sie können eine Schriftart nach Namen angeben (wie Arial), aber Sie können auch eine Schriftfamilie angeben, bei der es sich um eine Gruppe von Schriftarten handelt. Der Computer, auf dem die Webseite angezeigt wird, entscheidet, welcher aus dieser Schriftfamilie verwendet wird. Benutzer können die Schriftart ändern, die in den Einstellungen ihres Webbrowsers verwendet werden soll.

Beispielsweise repräsentiert die serifenlose Schrift eine Schriftfamilie von Schriftarten ohne Serifen. Versuchen Sie es in Serif oder Monospace zu ändern, um zu sehen, welche Schriftart Sie erhalten!

ctx.font = "fett 36px serifenlos"; ctx.fillText ("HubPages", 10, 100);

Das Obige gibt die Schriftart an und füllt den Text "HubPages" an der Stelle (10, 100). Gut, jetzt haben wir Text, aber es ist noch nichts Besonderes: Es ist nur schwarzer Text! Wie bei jeder anderen Form können Sie den fillStyle ändern, um die Farbe des Texts zu ändern. Wenn Sie die folgende Zeile vor den Befehl fillText setzen, erhalten Sie roten Text:

ctx.fillStyle = "rgb (255, 0, 0)";

Zeichnen von Text mit Schatten auf HTML5-Leinwand

Das Hinzufügen von Schatten ist eine einfache Möglichkeit, Ihren Text etwas ausgefallener wirken zu lassen. Sie müssen die Farbe des Schattens angeben und angeben, wo sich der Schatten relativ zum Text befinden soll (oder zu einer anderen Form, da das Folgende für alles funktioniert, was Sie auf einer HTML5-Zeichenfläche zeichnen).

Ändern Sie Ihren Code so, dass er folgendermaßen aussieht:

ctx.font = "fett 36px serifenlos"; ctx.shadowColor = "rgb (190, 190, 190)"; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillText ("HubPages", 10, 100);

Wie Sie sehen können, haben wir shadowColor, shadowOffsetX und shadowOffsetY. Die shadowColor ist grau, Sie können jedoch auch eine andere Farbe verwenden. Mit shadowOffsetX und shadowOffsetY wird der Schatten unter dem Text entfernt. Wenn Sie beide bei 0 belassen würden, würde das Licht von oben kommen und Sie würden den Schatten nicht sehen. Diese Versatzwerte (der Wert 10 für x und y) bedeuten, dass der Schatten für 10 Schritte entlang beider Koordinatenachsen (nicht unbedingt Pixel) nach rechts und unten verschoben wird.

ctx.font = "fett 36px serifenlos"; ctx.shadowColor = "rgb (190, 190, 190)"; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.shadowBlur = 10; ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillText ("HubPages", 10, 100);

Dies ist ein guter Anfang: Wir haben farbigen Text und einen Schatten. Aber wir können noch mehr tun. Lassen Sie uns Farbverläufe einführen - diese können Ihre Texte wirklich von gewöhnlich zu ausgefallen machen!

Zeichnen von Text mit Farbverlauf auf HTML5-Leinwand

Anstatt Ihre Texte in einer einzigen Farbe zu füllen, können Sie sie mit mehreren Farben füllen. Dies wird als Farbverlauf bezeichnet, bei dem eine Farbe allmählich in die nächste fließt. Wir werden einen linearen Farbverlauf verwenden, der genau das tut: Wir geben zwei Farben an und alle dazwischen liegenden Farben werden automatisch berechnet. Dies ergibt einen schön gefärbten Text.

Wir werden einen Farbverlauf von Rot nach Gelb hinzufügen. Ersetzen Sie einfach die Zeile durch fillStyle durch Folgendes:

var gradient = ctx.createLinearGradient (0, 0, 150, 100); gradient.addColorStop (0, "rgb (255, 0, 0)"); gradient.addColorStop (1, "rgb (255, 255, 0)"); ctx.fillStyle = Farbverlauf;

Der fillStyle ist jetzt ein Farbverlauf anstelle einer Farbe. Wir erstellen den Verlauf, indem wir createLinearGradient des Zeichnungskontexts aufrufen. Sie müssen zwei Punkte angeben, und zwischen diesen Punkten wird der Farbverlauf angewendet. Wir verwenden den Startpunkt (0, 0) und den Endpunkt (150, 100).

Wir geben dann Farben mit addColorStop an. Das erste Argument sagt uns, wie weit die Farbe vom Startpunkt entfernt ist. Dies ist ein Wert von 0 bis 1, wobei 0 am Startpunkt und 1 am Endpunkt bedeutet. Ein Wert von 0 bedeutet also, dass die von Ihnen angegebene Farbe für den Startpunkt gilt. Ein Wert von 0,5 bedeutet die Hälfte zwischen den angegebenen Koordinaten und 1 bedeutet den Endpunkt. Wir geben dem Startpunkt die Farbe Rot und dem Endpunkt die Farbe Gelb. Wir verwenden zwei Farben für unseren Verlauf, aber Sie können mehr als zwei verwenden, wenn Sie möchten.

Beachten Sie, dass diese Koordinaten unabhängig von Ihrem Text sind. Wenn Sie sich entscheiden, die Position Ihres Textes zu ändern, sieht er wahrscheinlich anders aus, da dann die Farbinformationen an dieser Position nachgeschlagen werden. Wenn Sie einen Verlauf für fillStyle verwenden, ändern Sie die Farben für alle Füllbefehle (fillText, fillRect usw.), sodass Sie ein wenig mit den Koordinaten Ihres Verlaufs und Ihres Textes spielen müssen, wenn er nicht so aussieht du willst es.

Es fängt jetzt wirklich an, schick auszusehen. Wir haben noch einen Trick im Ärmel, bei dem der Text mithilfe von Transformationen gedreht wird.

Drehen von Text auf HTML5-Leinwand

Um den Text zu drehen, fügen Sie einfach den Befehl zum Drehen hinzu. Das Argument ist der Drehwinkel im Uhrzeigersinn im Bogenmaß. Verwenden Sie also einen negativen Wert, um sich gegen den Uhrzeigersinn zu drehen:

ctx.rotate (-0,25);

Wir haben jetzt unser Endergebnis: einen ausgefallenen Text mit einem Farbverlauf, einem Schatten und ein bisschen Rotation!

Weitere Möglichkeiten zur Verwendung von HTML5

• HTML5-Tutorial: Zeichnen von Kreisen und Bögen
  Das Zeichnen von Kreisen und Bögen in HTML5 kann eine ziemliche Herausforderung sein. In diesem Tutorial erkläre ich, wie man Kreise und Bögen zeichnet und wie die Winkel von Bögen gemessen werden. Dieses Tutorial enthält viele Beispiele.

Dieser Artikel ist genau und nach bestem Wissen des Autors. Der Inhalt dient nur zu Informations- oder Unterhaltungszwecken und ersetzt nicht die persönliche Beratung oder professionelle Beratung in geschäftlichen, finanziellen, rechtlichen oder technischen Angelegenheiten.