createRadialGradient और पारदर्शिता

Question

मैं HTML5 कैनवास पर createRadialGradient() के साथ खेल रहा हूं। यह एक आकर्षण की तरह काम करता है, सिवाय इसके कि जब मैं (अर्ध-पारदर्शिता) को लागू करने की कोशिश कर रहा हूं।

मैंने चीजों को उम्मीदवार स्पष्ट करने के लिए यह jsFiddle बनाया: http://jsfiddle.net/rfLf6/1/।

function circle(x, y, r, c) { 
    ctx.beginPath(); 
    var rad = ctx.createRadialGradient(x, y, 1, x, y, r); 
    rad.addColorStop(0, c); 
    rad.addColorStop(1, 'transparent'); 
    ctx.fillStyle = rad; 
    ctx.arc(x, y, r, 0, Math.PI*2, false); 
    ctx.fill(); 
} 

ctx.fillRect(0, 0, 256, 256); 

circle(128, 128, 200, 'red'); 
circle(64, 64, 30, 'green'); 

क्या हो रहा है एक चक्र (रेडियल ढाल) के दायरे r साथ (x, y) पर चित्रित है और रंग बंद हो जाता है r और 'transparent' हैं। हालांकि, हरा सर्कल हरे से काला पर जा रहा है, जबकि इसे पारदर्शी, यानी पृष्ठभूमि सर्कल के उपयुक्त लाल रंगों पर जाना चाहिए।

एचटीएमएल 5 कैनवास पर पारदर्शी रेडियल ग्रेडियेंट कैसे लागू करता है?

Answer 1

ठीक है, जब से तुम से पूछा:

मैं जावास्क्रिप्ट के साथ <canvas> उपयोग करने के बारे में ज्यादा पता नहीं है, लेकिन मैं CSS3 के ढ़ाल बारे में पता है, और पारदर्शिता के साथ काम करने के लिए हमेशा की तरह rgba रंगों का उपयोग किया जा सके।

ढाल को "फीका आउट" पारदर्शी बनाने के लिए, आप एक ही रंग का एक पारदर्शी संस्करण जोड़ सकते हैं।

है यही कारण है कि मैं यहाँ क्या किया: http://jsfiddle.net/thirtydot/BD3xA/