Html5'te nasıl şeffaf bir tuval yaparım?

Bir tuvali nasıl şeffaf yapabilirim? Yapmam gerek çünkü iki tuvali üst üste koymak istiyorum.

Tuvaller varsayılan olarak şeffaftır.

Bir sayfa arka plan resmi ayarlamayı deneyin ve ardından üzerine bir tuval yerleştirin. Tuval üzerine hiçbir şey çizilmezse, sayfa arka planını tam olarak görebilirsiniz.

Bir tuvali cam bir tabakta resim gibi düşünün.

Az önce yapmaya çalıştığım şeyi tam olarak yapmaya çalıştığınıza inanıyorum: Üst üste dizilmiş iki tuval istiyorum ... alttaki statik bir görüntüye sahip ve üstteki hareketli sprite içeriyor. Animasyon nedeniyle, her yeni kareyi oluşturmanın başlangıcında üst katmanın arka planını şeffaf olacak şekilde temizlemeniz gerekir. Sonunda cevabı buldum: globalAlpha kullanmıyor ve rgba () rengi kullanmıyor. Basit ve etkili cevap şudur:

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

Bir <canvas id="canvasID">özelliğin her zaman şeffaf olmasını istiyorsanız, sadece ayarlamanız gerekir.

#canvasID{
    opacity:0.5;
}

Bunun yerine, tuval alanındaki bazı belirli öğelerin şeffaf olmasını istiyorsanız, çizerken saydamlığı ayarlamanız gerekir.

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

Sadece tuvalin arka planını şeffaf olarak ayarlayın.

#canvasID{
    background:transparent;
}

İki tuvalinizi üçüncü bir tuvale boyayın.

Aynı sorunu yaşadım ve buradaki çözümlerin hiçbiri sorunumu çözmedi. Üstünde başka bir şeffaf tuval olan bir opak tuvalim vardı. Opak tuval tamamen görünmezdi, ancak sayfa gövdesinin arka planı görünürdü. Üstteki şeffaf tuvalden çizimler görünürken, altındaki opak tuval görünmüyordu.

Son cevaba yorum yapamıyorum, ancak düzeltme nispeten kolaydır. Opak tuvalinizin arka plan rengini ayarlayın:

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

Emin değilim ama görünüşe göre arka plan rengi şeffaf olarak vücuttan miras alınmış.