Maison > interface Web > Tutoriel H5 > le corps du texte

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

黄舟
Libérer: 2017-02-28 15:43:29
original
1528 Les gens l'ont consulté

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);
Copier après la connexion

Notes détude préliminaires de Html5 Canvas (7) -SynthèseCet exemple Présente l'utilisation de la valeur alpha globale et explique également qu'il s'agit d'une valeur d'état de dessin. Vous pouvez également utiliser <p>enregistrer<span   style= 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.

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);
Copier après la connexion

Notes détude préliminaires de Html5 Canvas (7) -SynthèseC'est la valeur par défaut de <p>globalCompositeOperation<span   style=

Ce qui suit présente la correspondance de valeur de

globalCompositeOperation Effet :

"destination-over"

 :

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

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



"briquet"

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

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



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) !



Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!