firefox y radialgradient (usando lienzo html5)

Por alguna razón, mi firefox no muestra un degradado radial al usar un lienzo, ¿alguien sabe por qué? (No tengo este problema en otros equipos)firefox y radialgradient (usando lienzo html5)

, aquí tienes el código estoy usando:

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: Tengo este problema sólo en Firefox (Está actualizados)

Fuente

2011-12-26 Camilo Barraza

Tengo el mismo problema (Firefox 11): http://i.imgur.com/ZSfEL.png – nak

Parece que Firfox ha resuelto oficialmente el problema en la versión 11. Por lo tanto, ya no es necesario usar mi solución más abajo. . –

He actualizado mi Firefox y todavía no tengo suerte ... extraño –

No estoy seguro, pero si este código funciona en otras PC bajo Firefox, entonces puede ser que tenga una versión anterior del navegador FireFox o llame a document.getElementById antes de que se cargue la etiqueta cavas con id "layer2". El otro problema que noté fue que usted usa números flotantes sin cero inicial. Por ejemplo 0.5 en vez de 0.5. ¿Qué pasa cuando ejecuta este código?

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

Fuente

2011-12-26 13:59:03

En Firefox, el lienzo funciona bien cuando uso colores normales, pero cuando uso degradado todo se vuelve blanco y solo puedo ver trazos. –

Es porque el gradiente está fallando y por defecto está en blanco. –

Después de buscar por meses, ahora tengo una respuesta a esta difícil pregunta. Mozilla cambió cómo funcionan sus degradados radiales. Para crear un gradiente radial simple ya no es necesario crear una ruta. Simplemente llene un rectángulo en su lugar. Ver abajo ejemplo de código:

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

Este método es increíblemente más eficiente que la creación de trayectorias con un gradiente radial. Aunque, también puedo ver que este método es un poco más limitante para los desarrolladores. Consulte este ejemplo de la red de desarrolladores de Mozilla para obtener un mejor ejemplo: https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

Fuente

2012-04-01 16:38:48

He encontrado un problema extraño en Firefox con SVG y radialGradients. Si defino el relleno en una clase CSS e incrusto el CSS en el documento, funciona bien, sin embargo, si muevo el CSS en un archivo separado y uso la etiqueta 'link' para incluir el CSS, entonces el radialGradient no funciona. Esto parece ser un error en Firefox ya que funciona en Chrome, Safari, Opera e incluso IE, pero no en Firefox.

Fuente

2014-10-10 11:19:18 SPlatten

Eso no parece ser una respuesta a esta pregunta, que trata sobre el lienzo. –

firefox y radialgradient (usando lienzo html5)

Respuesta

Cuestiones relacionadas