Propriété globalAlpha du Canvas
Exemple
Dessinez un rectangle rouge. Réglez la transparence (globalAlpha) à 0,5. Ensuite, dessinez un rectangle bleu et un rectangle vert :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Activer la transparence
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50); Description
La propriété globalAlpha définit ou renvoie la valeur de transparence du contexte.
La valeur de la propriété globalAlpha doit être un nombre compris entre 0.0 (entièrement transparent) et 1.0 (par défaut, pas de transparence).
Syntaxe
| context .globalAlpha = number |
Valeurs de Propriété
| Valeur | Description | Jouez-le |
|---|---|---|
| number | La transparence 0.0 = pleine transparence 1.0 = pas de transparence |
Support des Navigateurs
L'élément <canvas> est une norme HTML5 (2014).
globalAlpha est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |