firefox ve radialgradient (html5 tuvalini kullanarak)

Question

Herhangi bir nedenden dolayı firefox'um bir Tuval kullanırken radyal gradyan göstermiyor, kimse nedenini biliyor mu?

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: Kod Özür bazı kullanıyor burada

(ı diğer bilgisayarlarda bu sorunu yok mu) Ben yalnızca Firefox (İt's güncellenmiş)

içinde bu sorun var

Answer 1

emin değilim, ama FireFox altında diğer bilgisayarlarda bu kod çalışması ardından olabilir eğer yüklenecek id "Layer2" ile cavas etiketinden önce bir Firefox tarayıcısı eski sürümünü veya çağıran document.getElementById var. Fark ettiğim diğer bir problem, sıfır önde olmadan float numaralarını kullanmanızdır. Örneğin 0.5 yerine 0.5. Bu kodu çalıştırdığınızda ne olur?

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

Ay aradıktan sonra şimdi bu zor soruya bir yanıtım var. Mozilla radyal gradyanlarının nasıl çalıştığını değiştirdi. Basit bir radyal gradyan oluşturmak için artık bir yol oluşturmanız gerekmemektedir. Bunun yerine bir dikdörtgeni doldurmanız yeterlidir. Aşağıdan bakın kod örneği:

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); 

Bu yöntem, radyal gradyanlı yollar oluşturmaktan inanılmaz derecede daha verimlidir. Yine de, bu yöntemin geliştiricilere biraz daha sınırlayıcı olduğunu görebiliyorum. Daha iyi bir örnek için Mozilla'nın geliştirici ağından bu örneğe bakın: https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

Answer 3

Firefox ile SVG ve radialGradients için garip bir sorun buldum. Bir CSS sınıfındaki dolguyu tanımlar ve CSS'yi belgeye gömersem düzgün çalışır, ancak CSS'yi ayrı bir dosyaya taşır ve CSS'yi eklemek için 'link' etiketini kullanırsam, radialGradient çalışmaz. Bu, Firefox'ta Chrome, Safari, Opera ve hatta IE'de çalışan, ama Firefox'ta çalışmadığı için bir hata gibi görünüyor.