파이어 폭스와 RadialGradient는 어떤 이유로

(HTML5 캔버스를 사용하여)는, 내 파이어 폭스 나던 쇼 방사형 그라데이션은, 사람이 이유를 알고 있습니까?파이어 폭스와 RadialGradient는 어떤 이유로

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;

추신 : 코드 미안의 일부가 사용하고 여기

(I 다른 컴퓨터에서이 문제를하지는) 난 단지 파이어 폭스 (키우면 업데이트)

에서이 문제가

출처

2011-12-26 Camilo Barraza

동일한 문제 (Firefox 11)가 있습니다. http://i.imgur.com/ZSfEL.png – nak

Firfox가 공식적으로 버전 11에서 문제를 해결 한 것처럼 보입니다. 이제는 아래에서 내 솔루션을 사용할 필요가 없습니다. . –

ive는 내 파이어 폭스를 업데이트했지만 여전히 행운이 없다. 이상하다. –

는 잘 모르겠지만, 파이어 폭스에서 다른 PC에이 코드가 작동 후 수 있습니다 경우로드 할 ID가 "계층 2"와 카바 (Cava) 태그 전에 파이어 폭스 브라우저의 이전 버전 또는 전화 document.getElementById를있다. 내가 알아 차린 다른 문제는 0으로 시작하지 않고 float 숫자를 사용했다는 것입니다. 예를 들어 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);

출처

2011-12-26 13:59:03

파이어 폭스에서 일반적인 색상을 사용할 때 캔버스가 잘 작동하지만 그라데이션을 사용하면 모든 것이 흰색이되고 나는 스트로크를 볼 수있다. –

그래디언트가 실패하고 대신 채우기를 기본값으로 사용하기 때문입니다. –

몇 달 동안 검색 한 후 이제이 어려운 질문에 대한 답변을 얻었습니다. Mozilla는 방사형 그래디언트가 작동하는 방식을 변경했습니다. 단순한 방사형 그래디언트를 만들려면 더 이상 경로를 만들 필요가 없습니다. 대신 사각형을 채우십시오. 아래 코드 예제를 참조하십시오.

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

이 방법은 방사형 그래디언트가있는 경로를 만드는 것보다 훨씬 효율적입니다. 비록이 방법이 개발자에게 좀 더 제한적이라는 것을 알 수 있습니다. 더 나은 예를 보려면 Mozilla의 개발자 네트워크에서이 예제를보십시오. https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

출처

2012-04-01 16:38:48

SVG와 radialGradients를 사용하여 Firefox에서 이상한 문제를 발견했습니다. CSS 클래스에서 채우기를 정의하고 CSS를 문서에 포함하면 제대로 작동하지만 CSS를 별도의 파일로 옮기고 'link'태그를 사용하여 CSS를 포함하면 radialGradient가 작동하지 않습니다. 이것은 크롬, 사파리, 오페라, 심지어 IE에서는 작동하지만 파이어 폭스에서는 작동하지 않기 때문에 파이어 폭스의 버그 인 것 같습니다.

출처

2014-10-10 11:19:18 SPlatten

캔버스에 관한이 질문에 대한 답변이 아닌 것 같습니다. –

파이어 폭스와 RadialGradient는 어떤 이유로

답변

관련 문제