Retourner à la page d'accueil de TJS

Propriété : CanvasRenderingContext2D.globalAlpha

Contient le niveau d'opacité alpha du contexte de canvas

Syntaxe
Number ctx.globalAlpha

Compatible tous navigateurs

Description
Contient le niveau de transparence alpha du contexte de canvas.
La valeur 0 indique une transparence totale
La valeur 1 indique une opacité totale


Exemple 1 : Superposition de boites avec transparence
Code source
<canvas id="myCanevas" style="width:250px; height:250px; background:#fff" ></canvas>

<script type="text/javascript">
var ctx = document.getElementById("myCanevas").getContext('2d');

ctx.globalAlpha = 1;
ctx.fillStyle = "#316AC5";
ctx.fillRect(5, 5, 150, 150);

ctx.globalAlpha = 0.5;
ctx.fillStyle = "#FFA500";
ctx.fillRect(30, 40, 200, 100);

ctx.globalAlpha = 0.2;
ctx.fillStyle = "#FFF";
ctx.fillRect(80, 10, 120, 80);


</script>

Résultat
Emulation de la console
Explication
Superposition de rectangles plein avec différents niveaux de transparence.

Page en rapport
Le tutoriel sur le dessin avec canvas
Page mise à jour le

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 14 novembre 2019

Version papier à 29€90
Format électronique à 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le 20/09/2020 15:23:49 sur php7 en 174.48 ms