Vorläufige Studiennotizen zu Html5 Canvas (7) -Synthese

In diesem Artikel werden die beiden anderen Zeichnungszustandswerte vorgestellt, nämlich der globale Alpha-Wert und die Syntheseoperation. Schauen wir uns zunächst den globalen Alpha-Wert an.

Der globale Alpha-Wert ist sehr einfach ist unser a-Wert im 🎜>argb-Wert. Der Unterschied besteht darin, dass der globale Alpha-Wert in 0,0 liegen muss (vollständig transparent) bis 1,0 (vollständig transparent), entsprechend dem zuvor genannten „a“-Wert 0 bis 255, der Standardwert ist 1,0.

Der folgende Code erzielt den folgenden Effekt:

context.fillStyle = "red";
context.save();
context.globalAlpha = 0.5;
context.fillRect(50,50,100,100);
context.restore();
context.fillRect(200,50,100,100);

Wiederherstellen verwenden Der Aufruf von save behält den red-Wert von fillStyle bei, also was gezeichnet wird ist ein halbtransparentes rotes Quadrat und ein undurchsichtiges rotes Quadrat.

Der Kompositionsvorgang ist auch ein Zustandswert

globalCompositeOperation. Durch die Definition seiner unterschiedlichen Werte werden einige Vorgänge abgeschlossen, hauptsächlich die Quellgrafiken (definieren globalCompositeOperation Der Zeichnungskontext vor ) und die Zielgrafiken (der Zeichnungskontext nach der Definition von globalCompositeOperation)

Schauen Sie sich das zuerst an Code, Der folgende Effekt wird erreicht

context.fillStyle = "red";
context.globalCompositeOperation = "source-over";
context.fillRect(50,50,100,100);
context.fillStyle = "blue";
context.fillRect(100,100,100,100);

Im Folgenden wird die Wertentsprechung von globalCompositeOperation

Wirkung: "destination-over"

:

Einige Werte werden derzeit von

Chrome

-Browsern nicht unterstützt und sie müssen warten, bis die Spezifikationen festgelegt werden Das Obige sind die vorläufigen Studiennotizen zu Html5 Canvas (7) - Synthese Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!