Wie erstelle ich eine transparente Leinwand in HTML5?

Wie kann ich eine Leinwand transparent machen? Ich muss, weil ich zwei Leinwände übereinander legen möchte.

Leinwände sind standardmäßig transparent.

Versuchen Sie, ein Seitenhintergrundbild festzulegen, und legen Sie dann eine Leinwand darüber. Wenn nichts auf der Leinwand gezeichnet ist, können Sie den Seitenhintergrund vollständig sehen.

Stellen Sie sich eine Leinwand wie das Malen auf einer Glasplatte vor.

Ich glaube, Sie versuchen genau das zu tun, was ich gerade versucht habe: Ich möchte zwei gestapelte Leinwände ... das untere hat ein statisches Bild und das obere enthält animierte Sprites. Aufgrund der Animation müssen Sie den Hintergrund der obersten Ebene zu Beginn des Renderns jedes neuen Frames transparent löschen. Ich habe endlich die Antwort gefunden: Es wird kein globalAlpha verwendet und es wird keine rgba () -Farbe verwendet. Die einfache und effektive Antwort lautet:

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

Wenn Sie möchten, dass ein bestimmtes Objekt <canvas id="canvasID">immer transparent ist, müssen Sie es nur festlegen

#canvasID{
    opacity:0.5;
}

Wenn Sie stattdessen möchten, dass bestimmte Elemente im Canvas-Bereich transparent sind, müssen Sie beim Zeichnen die Transparenz festlegen, d. H.

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

Stellen Sie einfach den Hintergrund der Leinwand auf transparent ein.

#canvasID{
    background:transparent;
}

Malen Sie Ihre beiden Leinwände auf eine dritte Leinwand.

Ich hatte das gleiche Problem und keine der Lösungen hier löste mein Problem. Ich hatte eine undurchsichtige Leinwand mit einer anderen transparenten Leinwand darüber. Die undurchsichtige Leinwand war vollständig unsichtbar, aber der Hintergrund des Seitenkörpers war sichtbar. Die Zeichnungen von der transparenten Leinwand oben waren sichtbar, die undurchsichtige Leinwand darunter nicht.

Ich kann die letzte Antwort nicht kommentieren, aber die Korrektur ist relativ einfach. Stellen Sie einfach die Hintergrundfarbe Ihrer undurchsichtigen Leinwand ein:

#canvas1 { background-color: black; } //opaque canvas
#canvas2 { ... } //transparent canvas

Ich bin mir nicht sicher, aber es sieht so aus, als würde die Hintergrundfarbe vom Körper als transparent vererbt.