firefox e radialgradient (utilizzando la tela html5)

Per qualche motivo, il mio firefox non mostra un gradiente radiale quando si utilizza un Canvas, qualcuno sa perché? (Io non avere questo problema su altri computer)firefox e radialgradient (utilizzando la tela html5)

Ecco parte del codice sto utilizzando:

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: ho questo problema solo in Firefox (E'aggiornati)

fonte

2011-12-26 Camilo Barraza

Sto avendo lo stesso problema (Firefox 11): http://i.imgur.com/ZSfEL.png – nak

Sembra che Firfox abbia risolto ufficialmente il problema nella versione 11. Quindi non c'è più bisogno di usare la mia soluzione qui sotto . –

ive aggiornato il mio firefox e ancora senza fortuna ... strano –

Non sono sicuro, ma se questo codice funziona su altri PC con FireFox, allora potresti avere una vecchia versione del browser FireFox o chiamare document.getElementById prima che il tag cavas con id "layer2" venga caricato. L'altro problema che ho notato è che si utilizzano numeri float senza zero iniziale. Ad esempio 0,5 anziché 0,5. Cosa succede quando si esegue questo codice?

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

fonte

2011-12-26 13:59:03

Su firefox, la tela funziona bene quando uso i colori normali, ma quando uso il gradiente tutto diventa bianco e sono in grado di vedere solo i tratti. –

È perché il gradiente non funziona e al suo posto è di default un riempimento bianco. –

Dopo aver cercato per mesi, ora ho una risposta a questa domanda elusiva. Mozilla ha cambiato il funzionamento dei loro gradienti radiali. Per creare un gradiente radiale semplice non è più necessario creare un percorso. Devi semplicemente riempire un rettangolo. Vedere l'esempio di codice seguente:

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

Questo metodo è incredibilmente più efficiente rispetto alla creazione di percorsi con un gradiente radiale. Anche se, posso anche vedere questo metodo è un po 'più limitativo per gli sviluppatori. Guarda questo esempio dalla rete di sviluppatori di Mozilla per un esempio migliore: https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

fonte

2012-04-01 16:38:48

Ho trovato uno strano problema in Firefox con SVG e radialGradients. Se definisco il riempimento in una classe CSS e incorporo il CSS nel documento, funziona bene, tuttavia se sposto il CSS in un file separato e utilizzo il tag 'link' per includere il CSS, il radialGradient non funziona. Questo sembra essere un bug in Firefox poiché funziona in Chrome, Safari, Opera e persino IE, ma non in Firefox.

fonte

2014-10-10 11:19:18 SPlatten

Non sembra essere una risposta a questa domanda, che riguarda la tela. –

firefox e radialgradient (utilizzando la tela html5)

risposta

Problemi correlati