HTML5 - Modificare l'opacità di un pareggio rettangolo

Question

Diciamo che io traggo un elemento HTML5 di rettangolo utilizzando questo:

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

Come dovrei farlo il 50% trasparente?

Answer 1

Utilizzare globalAlpha. Dovrai anche disegnare con fillRect. clearRect cancella semplicemente i pixel. Non è in grado di cancellare parzialmente, quindi dovrai utilizzare fillRect o altre primitive di disegno.

da w3schools.com:

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

Answer 2

clearRect rimuove quello che era lì e lascia in bianco. Il modo migliore è usare un valore rgba fillStyle in quanto renderà trasparente solo il rettangolo (o qualsiasi altra forma che si sta disegnando). Il codice sarebbe:

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

(grazie How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?)