HTML5 - Ändern Opazität eines Unentschiedens Rectangle

Question

Lasst uns sagen, dass ich ein HTML5-Element Rechteck zeichnen diese mit:

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

Wie würde ich es transparent 50% machen?

Answer 1

Verwenden Sie globalAlpha. Sie müssen auch mit fillRect zeichnen. clearRect löscht nur Pixel. Es kann nicht teilweise gelöscht werden, also müssen Sie fillRect oder andere Zeichengrundelemente verwenden.

von w3schools.com:

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

Answer 2

clearRect entfernt, was es war, und überlässt es leer. Der beste Weg besteht darin, einen rgba fillStyle-Wert zu verwenden, da er das Rechteck (oder eine andere Form, die Sie zeichnen) nur transparent macht. Der Code wäre:

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

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