जवाबों:
कैनवस डिफ़ॉल्ट रूप से पारदर्शी होते हैं।
पृष्ठ पृष्ठभूमि छवि सेट करने का प्रयास करें, और फिर उसके ऊपर एक कैनवास डालें। यदि कैनवास पर कुछ भी नहीं खींचा गया है, तो आप पृष्ठ की पृष्ठभूमि को पूरी तरह से देख सकते हैं।
एक ग्लास प्लेट पर पेंटिंग की तरह एक कैनवास के बारे में सोचो।
मेरा मानना है कि आप वास्तव में वही करने की कोशिश कर रहे हैं जो मैंने अभी करने की कोशिश की है: मैं दो स्टैक्ड कैनवस चाहता हूं ... नीचे एक स्थिर छवि है और शीर्ष में एनिमेटेड स्प्राइट हैं। एनीमेशन की वजह से, आपको हर नए फ्रेम को प्रस्तुत करने की शुरुआत में शीर्ष परत की पृष्ठभूमि को पारदर्शी बनाने की आवश्यकता होती है। मुझे अंत में जवाब मिला: यह GlobalAlpha का उपयोग नहीं कर रहा है, और यह एक rgba () रंग का उपयोग नहीं कर रहा है। सरल, प्रभावी उत्तर है:
context.clearRect(0,0,width,height);Iif आप एक विशेष चाहते हैं कि आप <canvas id="canvasID">हमेशा पारदर्शी रहें, आपको बस सेट करना है
#canvasID{
opacity:0.5;
}इसके बजाय, यदि आप चाहते हैं कि कैनवास क्षेत्र के अंदर कुछ विशेष तत्व पारदर्शी हों, तो आपको ड्रॉ करते समय पारदर्शिता लाना होगा
context.fillStyle = "rgba(0, 0, 200, 0.5)";opacityयदि कैनवास में पृष्ठभूमि भराव है तो परिवर्तन का कोई प्रभाव नहीं पड़ेगा।
बस कैनवास की पृष्ठभूमि को पारदर्शी पर सेट करें।
#canvasID{
background:transparent;
}अपने दो कैनवस को तीसरे कैनवास पर पेंट करें।
मुझे भी यही समस्या थी और यहाँ के किसी भी समाधान से मेरी समस्या हल नहीं हुई। मेरे पास एक अपारदर्शी कैनवास था, जिसके ऊपर एक और पारदर्शी कैनवास था। अपारदर्शी कैनवास पूरी तरह से अदृश्य था लेकिन पेज बॉडी की पृष्ठभूमि दिखाई दे रही थी। शीर्ष पर पारदर्शी कैनवास से चित्र दिखाई दे रहे थे, जबकि इसके नीचे अपारदर्शी कैनवास नहीं था।
अंतिम उत्तर पर टिप्पणी नहीं कर सकते हैं, लेकिन फिक्स अपेक्षाकृत आसान है। बस अपने अपारदर्शी कैनवास की पृष्ठभूमि का रंग निर्धारित करें:
#canvas1 { background-color: black; } //opaque canvas
#canvas2 { ... } //transparent canvasमुझे यकीन नहीं है, लेकिन ऐसा लगता है कि पृष्ठभूमि-रंग शरीर से पारदर्शी के रूप में विरासत में मिला है।