HTML5 - Changer l'opacité d'un rectangle de dessin

Question

Disons que je dessine un élément HTML5 de rectangle en utilisant ceci:

context.clearRect(25, 72, 32, 32);

Comment pourrais-je le rendre transparent à 50%?

Answer 1

Utilisez globalAlpha. Vous devrez également dessiner avec fillRect. clearRect efface simplement les pixels. Il ne peut pas être effacé partiellement, vous devrez donc utiliser fillRect ou d'autres primitives de dessin.

de w3schools.com :

    ctx.globalAlpha = 0.2;
    ctx.fillRect(50,50,75,50);
    ctx.globalAlpha = 1.0;

Answer 2

ClearRect supprime ce qui était là et le laisse vide. La meilleure façon consiste à utiliser une valeur rgba fillStyle car elle rendra uniquement le rectangle (ou toute autre forme que vous dessinez) transparent. Le code serait:

ctx.fillStyle = 'rgba(225,225,225,0.5)';
ctx.fillRect(25,72,32,32);

(merci Comment changer l'opacité (alpha, transparence) d'un élément dans un élément canvas après qu'il ait été dessiné? )