Comment faire un canevas transparent en html5 ?

Question

Comment rendre une toile transparente ? J'en ai besoin parce que je veux mettre deux toiles l'une sur l'autre.

Answer 1

Les toiles sont transparentes par défaut.

Essayez de définir une image d'arrière-plan de la page, puis placez une toile par-dessus. Si rien n'est dessiné sur le canevas, vous pouvez voir entièrement l'arrière-plan de la page.

Pensez à une toile comme peinture sur une plaque de verre .

Pour effacer une toile après avoir dessiné dessus, il suffit d'utiliser clearRect :

const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

Answer 2

Je crois que vous essayez de faire exactement ce que je viens d'essayer de faire : Je veux deux toiles empilées... celle du bas contient une image statique et celle du haut contient des sprites animés. À cause de l'animation, il faut que l'arrière-plan de la couche supérieure devienne transparent au début du rendu de chaque nouvelle image. J'ai finalement trouvé la réponse : il n'utilise pas globalAlpha, et il n'utilise pas une couleur rgba(). La réponse simple et efficace est :

context.clearRect(0,0,width,height);

Answer 3

Si vous voulez un <canvas id="canvasID"> pour être toujours transparent, il suffit de définir

#canvasID{
    opacity:0.5;
}

Au lieu de cela, si vous voulez que certains éléments particuliers à l'intérieur de la zone de la toile soient transparents, vous devez définir la transparence lorsque vous dessinez, c.-à-d.

context.fillStyle = "rgba(0, 0, 200, 0.5)";

Answer 4

Il suffit de définir l'arrière-plan de la toile comme transparent.

#canvasID{
    background:transparent;
}

Answer 5

Peignez vos deux toiles sur une troisième toile.

J'ai eu le même problème et aucune des solutions proposées ici n'a résolu mon problème. J'avais une toile opaque avec une autre toile transparente au-dessus. La toile opaque était complètement invisible mais l'arrière-plan du corps de la page était visible. Les dessins de la toile transparente du dessus étaient visibles alors que la toile opaque du dessous ne l'était pas.