फ़ायरफ़ॉक्स और रेडियलग्रेडिएंट (एचटीएमएल 5 कैनवास का उपयोग करके)

Question

किसी कारण से, मेरे फ़ायरफ़ॉक्स कैनवास का उपयोग करते समय रेडियल ग्रेडिएंट नहीं दिखाता है, क्या किसी को पता है क्यों?

var canvas = document.getElementById ("layer2") ; 
var context = canvas.getContext ("2d") ; 
var radgrad2 = context.createRadialGradient(x, y, 15 ,x-30,y-60, 0); 
radgrad2.addColorStop(0, aux.color , .5); 
radgrad2.addColorStop(0.75, "#ffffff" , .5); 
radgrad2.addColorStop(.5, "#ffffff" , .5); 
context.fillStyle = radgrad2; 

ps: कोड मैं से कुछ का उपयोग कर रहा

यहाँ

(मैं अन्य कंप्यूटरों पर इस समस्या नहीं है) मैं केवल फ़ायरफ़ॉक्स (यह अद्यतन)

में यह समस्या है

Answer 1

मुझे यकीन नहीं है, लेकिन यदि यह कोड फ़ायरफ़ॉक्स के तहत अन्य पीसी पर काम करता है तो हो सकता है कि आपके पास फ़ायरफ़ॉक्स ब्राउज़र का पुराना संस्करण हो या हो सकता है कि दस्तावेज़ "getElementById को "परत 2" लोड के साथ कैव टैग से पहले कॉल किया जाए। मैंने देखा कि दूसरी समस्या यह थी कि आप बिना शून्य के फ्लोट नंबर का उपयोग कर रहे हैं। उदाहरण के लिए 0.5 के बजाय 0.5। जब आप इस कोड को चलाते हैं तो क्या होता है?

window.addEventListener("load", function() { 
      var canvas = document.getElementById ("layer2") ; 
      if(!canvas.getContext) { 
       alert("Your browser don't support canvas."); 
      throw new Error("Your browser don't support canvas."); 
      } 
      var context = canvas.getContext ("2d") ; 
      var radgrad2 = context.createRadialGradient(x, y, 15 ,x-30,y-60, 0); 
      radgrad2.addColorStop(0, aux.color , 0.5); 
      radgrad2.addColorStop(0.75, "#ffffff" , 0.5); 
      radgrad2.addColorStop(0.5, "#ffffff" , 0.5); 
      context.fillStyle = radgrad2; 

}, false); 

Answer 2

महीनों के लिए खोज करने के बाद अब मुझे इस छद्म प्रश्न का उत्तर है। मोज़िला ने बदल दिया कि उनके रेडियल ग्रेडियेंट कैसे काम करते हैं। एक साधारण रेडियल ढाल बनाने के लिए आपको अब पथ बनाने की आवश्यकता नहीं है। आप बस इसके बजाय एक आयताकार भरें। नीचे कोड उदाहरण देखें:

var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50); 
radgrad2.addColorStop(0, '#FF5F98'); 
radgrad2.addColorStop(0.75, '#FF0188'); 
radgrad2.addColorStop(1, 'rgba(255,1,136,0)'); 

ctx.fillStyle = radgrad2; 
ctx.fillRect(0,0,150,150); 

यह विधि रेडियल ढाल के साथ पथ बनाने से अविश्वसनीय रूप से अधिक कुशल है। हालांकि, मैं यह तरीका डेवलपर्स के लिए थोड़ा अधिक सीमित होने के रूप में भी देख सकता हूं। बेहतर उदाहरण के लिए मोज़िला के डेवलपर नेटवर्क से यह उदाहरण देखें: https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

Answer 3

मुझे फ़ायरफ़ॉक्स में एसवीजी और रेडियल ग्रेडिएंट्स के साथ एक अजीब समस्या मिली है। यदि मैं एक सीएसएस वर्ग में भरने को परिभाषित करता हूं और दस्तावेज़ में सीएसएस को एम्बेड करता हूं तो यह ठीक काम करता है, हालांकि अगर मैं सीएसएस को एक अलग फ़ाइल में ले जाता हूं और सीएसएस को शामिल करने के लिए 'लिंक' टैग का उपयोग करता हूं, तो रेडियल ग्रेडिएंट काम नहीं करता है। यह फ़ायरफ़ॉक्स में एक बग प्रतीत होता है क्योंकि यह क्रोम, सफारी, ओपेरा और यहां तक ​​कि आईई में भी काम करता है, लेकिन फ़ायरफ़ॉक्स में नहीं।