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.

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

und 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.

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)

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

Wirkung: "destination-over"

Einige Werte werden derzeit von

-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 (m.sbmmt.com)!