English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In HTML5Wenn Sie auf dem Canvas Formen zeichnen, können Sie festlegen, wie Siegezeichnete Inhalte mit dem bereits gezeichneten Inhalt auf dem Canvas synthetisieren. In diesem Artikel wird erläutert, wie man Zeichnungen mit dem bereits gezeichneten Inhalt auf dem Canvas mischt.
2D-Context hat zwei Eigenschaften, die die Synthese-Modi des Canvas steuern. Dies sind:
globalAlpha
globalCompositeOperation
Die globalAlpha-Eigenschaft bestimmt die Transparenz der Zeichnungen/Deckkraft. Es kann Werte zwischen 0 und1zwischen diesen Werten. 0 bedeutet, dass das Zeichnen vollkommen transparent ist. Der Wert 0.5Stellt dar, dass das Zeichnen halbtransparent ist. Der Wert ist1Stellt dar, dass das Zeichnen vollkommen transparent ist. Der Standardwert ist1.
Die globalAlpha-Eigenschaft ist so eingestellt:
context.globalAlpha = 0.5;
Die globalCompositeOperation-Eigenschaft bestimmt, wie Siegezeichnete Inhalte in die bestehenden Grafiken auf dem Canvas mischen.
Die globalCompositeOperation-Eigenschaft ist so eingestellt:
context.globalCompositeOperation = "copy";
globalCompositeOperation referenziert "Quelle" und "Ziel" und legt fest, wie Quelle und Ziel gemischt werden. Quelle ist das, was Sie zeichnen, Ziel ist das, was bereits gezeichnet wurde. Nachfolgend eine Liste möglicher Werte und deren Bedeutung:
| Wert | Beschreibung |
copy | An Stellen, wo Quelle und Ziel übereinstimmen, wird die Quelle angezeigt. |
Ziel-atop | Wenn Quelle und Ziel übereinstimmen und beide nicht transparent sind, wird das Ziel angezeigt.Wenn das Ziel transparent ist, wird die Quelle angezeigt. |
Ziel-in | An Stellen, wo Quelle und Ziel übereinstimmen und beide nicht transparent sind, wird das Ziel angezeigt.An Stellen, wo es keine Überschneidung gibt, wird die Quelle nicht angezeigt. |
Ziel-out | An Stellen, wo Quelle und Ziel nicht übereinstimmen, wird das Ziel angezeigt.Transparenz wird überall angezeigt. |
Ziel-over | An Stellen, wo Quelle und Ziel übereinstimmen, wird das Ziel angezeigt.Wenn es keine Überschneidung gibt, wird die Quelle angezeigt. |
Quelle-atop | An Stellen, wo Quelle und Ziel übereinstimmen, wird die Quelle angezeigt.An Stellen, wo es keine Überschneidung gibt oder die Quelle transparent ist, wird das Ziel angezeigt. |
Quelle-in | Wenn Quelle und Ziel übereinstimmen und beide nicht transparent sind, wird die Quelle angezeigt.Transparenz wird überall angezeigt. |
Quelle-out | An Stellen, wo Quelle und Ziel nicht übereinstimmen, wird die Quelle angezeigt.Transparenz wird überall angezeigt. |
Quelle-over | Wenn die Quelle nicht transparent ist, wird die Quelle angezeigt.an das Ziel zeigen, woanders angezeigt werden. |
lighter | Quellfarbe und Zielcolor werden miteinander addiert, was die Farben heller macht und sie in Richtung1Farbwerte (die maximale Helligkeit dieser Farbe) bewegen. |
xor |
Dies ist ein Beispiel-Canvas, auf dem Sie Compositing-Modi und Alpha-Werte verwenden können. Sie können den Compositing-Modus ändern, indem Sie auf die Schaltfläche klicken. Sie können den Alpha-Modus ändern, indem Sie die Steuerelemente unter dem Canvas verwenden.
globalAlpha
Wenn Sie das Textfeld globalAlpha sehen, geben Sie Werte zwischen 0 und ein.10Werte zwischen 0.0. Der Code wird den Wert in den Bereich 0 bis1Werte zwischen 0.0. Ansonsten verwenden Sie den Schieberegler.
Hinweis: Beim Verfassen dieses Artikels unterscheiden sich Firefox und Chrome in der Behandlung dieser Compositing-Modi. Es scheint auch, dass sie sich von rects und text unterscheiden, wie diese Modi funktionieren. Probieren Sie verschiedene Modi in den verschiedenen Browsern aus, die Sie unterstützen möchten, um zu verstehen, wie sie funktionieren.