Notes d'étude préliminaires de Html5 Canvas (7) -Synthèse

Cet article présente les deux autres valeurs d'état de dessin, à savoir la valeur alpha globale et l'opération de synthèse. Tout d'abord, regardons la valeur alpha globale

La valeur alpha globale est très simple, elle. est notrea" en 🎜>argb, la différence est que la valeur alpha globale doit être en 0.0 (entièrement transparent) à 1.0 (entièrement transparent), correspondant à la valeur "a" mentionnée précédemment 0 à 255, la valeur par défaut est 1.0.

Le code suivant produira l'effet suivant :

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

restaurer, en raison de. l'appel de save conserve la valeur fillStyle de red, donc ce qui est dessiné est un carré rouge semi-transparent et un carré rouge opaque.

L'opération de composition est aussi une valeur d'état

globalCompositeOperation, définir ses différentes valeurs complétera certaines opérations, principalement les graphiques sources (définir globalCompositeOperation Le contexte de dessin avant ) et les graphiques cibles (le contexte de dessin après avoir défini globalCompositeOperation)

Premier coup d'oeil à ceci code, L'effet suivant sera obtenu

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

Ce qui suit présente la correspondance de valeur de

globalCompositeOperation Effet :

"destination-over"

 :

"briquet"

Certaines valeurs ne sont actuellement pas prises en charge par les navigateurs

chrome et doivent attendre que les spécifications soient stipulées

Ce qui précède sont les notes d'étude préliminaires de Html5 Canvas (7) - synthèse Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !