HTML5 में पारदर्शी कैनवास कैसे बनाएं?

पारदर्शी कैनवास बनाना

HTML5 कैनवास डिफ़ॉल्ट रूप से पारदर्शी होता है। पारदर्शिता को नियंत्रित करने के लिए globalAlpha प्रॉपर्टी या RGBA रंगों का उपयोग किया जाता है।

globalAlpha प्रॉपर्टी

globalAlpha प्रॉपर्टी (0.0 से 1.0) सभी ड्रॉइंग ऑपरेशन्स के लिए वैश्विक पारदर्शिता सेट करती है:

• 1.0 = पूरी तरह अपारदर्शी (डिफ़ॉल्ट)
• 0.0 = पूरी तरह पारदर्शी (अदृश्य)
• 0.5 = 50% पारदर्शी

उदाहरण: globalAlpha के साथ पारदर्शी आकृतियाँ

<!DOCTYPE html>
<html>
<body>
    <h2>globalAlpha के साथ पारदर्शिता</h2>
    <canvas id="canvas" width="400" height="200" style="border:2px solid #000; background:#f0f0f0;">
        आपका ब्राउज़र कैनवास टैग का समर्थन नहीं करता।
    </canvas>
    
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        // पृष्ठभूमि पैटर्न ताकि पारदर्शिता दिखे
        ctx.fillStyle = '#e0e0e0';
        for (let x = 0; x < 400; x += 40) {
            for (let y = 0; y < 200; y += 40) {
                if ((x + y) % 80 === 0) ctx.fillRect(x, y, 40, 40);
            }
        }
        
        // हरा आयत (अपारदर्शी)
        ctx.fillStyle = 'green';
        ctx.globalAlpha = 1.0;
        ctx.fillRect(20, 20, 100, 80);
        
        // पीला आयत (50% पारदर्शी)
        ctx.fillStyle = 'yellow';
        ctx.globalAlpha = 0.5;
        ctx.fillRect(80, 50, 100, 80);
        
        // लाल आयत (25% पारदर्शी)
        ctx.fillStyle = 'red';
        ctx.globalAlpha = 0.25;
        ctx.fillRect(140, 80, 100, 80);
        
        // नीला आयत (पूरी तरह पारदर्शी - अदृश्य)
        ctx.fillStyle = 'blue';
        ctx.globalAlpha = 0.0;
        ctx.fillRect(200, 110, 100, 80);
        // यह नहीं दिखेगा!
        
        // globalAlpha रीसेट करें
        ctx.globalAlpha = 1.0;
        ctx.fillStyle = 'black';
        ctx.font = '14px Arial';
        ctx.fillText('globalAlpha = 1.0', 30, 115);
        ctx.fillText('globalAlpha = 0.5', 90, 145);
        ctx.fillText('globalAlpha = 0.25', 150, 175);
    </script>
</body>
</html>

RGBA रंगों का उपयोग (अनुशंसित)

globalAlpha के बजाय RGBA रंगों का उपयोग करना अधिक लचीला है क्योंकि यह प्रति-आकृति नियंत्रण देता है:

const ctx = canvas.getContext('2d');

// RGBA: rgba(लाल, हरा, नीला, अल्फा)
// अल्फा: 0 (पारदर्शी) से 1 (अपारदर्शी)

ctx.fillStyle = 'rgba(255, 0, 0, 1.0)';   // अपारदर्शी लाल
ctx.fillRect(10, 10, 100, 50);

ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';   // 50% पारदर्शी हरा
ctx.fillRect(60, 30, 100, 50);

ctx.fillStyle = 'rgba(0, 0, 255, 0.2)';   // 20% पारदर्शी नीला
ctx.fillRect(110, 50, 100, 50);

// स्ट्रोक के लिए भी
ctx.strokeStyle = 'rgba(255, 255, 0, 0.8)';
ctx.lineWidth = 5;
ctx.strokeRect(10, 10, 200, 100);

कैनवास को पूरी तरह पारदर्शी रखना

डिफ़ॉल्ट रूप से कैनवास पारदर्शी होता है। इसे पारदर्शी रखने के लिए:

• पृष्ठभूमि रंग सेट न करें
• clearRect() का उपयोग करके क्षेत्र साफ़ करें
• CSS में background: transparent सुनिश्चित करें

<canvas id="transparentCanvas" width="300" height="200" 
        style="border:1px solid #ccc; background:transparent;"></canvas>

<script>
const ctx = document.getElementById('transparentCanvas').getContext('2d');

// केवल कुछ आकृतियाँ बनाएँ - बाकी पारदर्शी रहेगा
ctx.fillStyle = 'rgba(255, 0, 0, 0.7)';
ctx.beginPath();
ctx.arc(150, 100, 80, 0, Math.PI * 2);
ctx.fill();

// कैनवास को छवि के रूप में निर्यात (पारदर्शिता संरक्षित)
const dataURL = canvas.toDataURL('image/png'); // PNG पारदर्शिता का समर्थन करता है
</script>

पारदर्शी कैनवास को छवि के रूप में सहेजना

// PNG प्रारूप पारदर्शिता बनाए रखता है
const pngDataURL = canvas.toDataURL('image/png');

// JPEG पारदर्शिता का समर्थन नहीं करता (पारदर्शी क्षेत्र काले हो जाएंगे)
const jpegDataURL = canvas.toDataURL('image/jpeg', 0.9); // गुणवत्ता 0.9