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.

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

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

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)

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

globalCompositeOperation Effet :

 :

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