HTML5 - Effekte und Transformationen

Es gibt verschiedene Arten von Effekte und Transformationen die auf Leinwand aufgetragen werden können, ermöglicht es, Bilder zu erzeugen, die man sich vorher nur in Flash und ähnlichen Werkzeugen vorstellen konnte.
Unter diesen Effekten haben wir die Schaffung von Schatten, die es uns ermöglichen, den Zeichnungen, die wir in unsere Bilder integrieren, ein Relief zu verleihen SegeltuchEs gibt auch Transparenzeffekte, die es uns ermöglichen, ein Element mit einem anderen zu überlagern, wodurch unendliche Entwurfswahrscheinlichkeiten erzeugt werden.
Farbtöne
Die Schatten ermöglichen es uns, unseren Elementen eine Tiefen- und Reliefwirkung zu verleihen. Auf der Leinwand können wir diese Schatten in die Elemente integrieren. Dafür haben wir die folgenden Eigenschaften, mit denen wir sie anpassen können, je nachdem, was wir mit ihnen erreichen möchten:

• SchattenUnschärfe: Stellt den Schärfegrad des Schattens auf einen höheren Wert, weniger Schärfe und mehr Streuung ein.
• SchattenFarbe: Ermöglicht Ihnen, die Farbe des Schattens einzustellen.
• shadowOffsetX: Legt den horizontalen Austrittspunkt des Schattens fest.
• shadowOffsetY: Legt den vertikalen Ablegepunkt des Schattens fest.

Sehen wir uns unten ein Codebeispiel an, wie Sie diese Eigenschaften verwenden, um Schatten zu erstellen:

 Beispiel Ihr Browser unterstützt das Element nicht Segeltuch 

In diesem Beispiel wenden wir Schatten auf ein Rechteck sowie Text und eine Kurve an, mal sehen, wie das im Browser aussieht:

Folien
Um Transparenz herzustellen, haben wir zwei Möglichkeiten, die erste ist die Verwendung der rgba-Funktion in Attributen fillStyle Ja StrichStil; Die zweite Möglichkeit besteht darin, die Zeichnungseigenschaft zu verwenden globalAlpha das gilt allgemein.
Sehen wir uns unten ein Beispiel an, das die zweite Form verwendet, die am einfachsten und am direktesten anzuwenden ist. Wir heben hervor, dass die Werte, die es akzeptiert globalAlpha sind 0 für volle Transparenz Ja 1 um es völlig undurchsichtig zu machen, im Beispiel verwenden wir 0,5 als Wert, der uns einen Mittelweg ermöglicht:

 Beispiel Ihr Browser unterstützt das Element nicht Segeltuch 

Wie wir sehen, haben wir ein Rechteck über den Text gezeichnet und danke an globalAlpha Wir sehen den Effekt der Transparenz, der uns die beiden gezeichneten Zahlen zu schätzen weiß:

Damit beenden wir das Tutorial, mit dem wir bereits das Wissen haben, um einige interessante Effekte auf unsere Kompositionen im Canvas-Element in anwenden zu können HTML5.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben