Inhaltsverzeichnis
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.
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:
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ß:
