HTML canvas globalAlpha-attribuut
Definitie en gebruik
globalAlpha Attribuut stelt of retourneert de huidige transparantie (alpha of doorschijnendheid) van de tekening in.
globalAlpha De waarde van het attribuut moet tussen 0.0tussen (volledig doorschijnend) en 1.0tussen (ondoorzichtig) en
Voorbeeld
Eerst, teken een rode rechthoek, vervolgens stel de transparantie (globalAlpha) in op 0.2, en teken vervolgens een groene en een blauwe rechthoek:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
// Adjust transparency
ctx.globalAlpha=0.2;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);
Syntax
context.globalAlpha=number;
Attribute value
| Value | Description |
|---|---|
| number | Transparency value. It must be between 0.0 (fully transparent) and 1.0 (opaque). |
Technical details
| Default value: | 1.0 |
|---|
Browser support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
