firefox và radialgradient (sử dụng canvas html5)

Question

Vì một số lý do, firefox của tôi không hiển thị gradient xuyên tâm khi sử dụng Canvas, có ai biết tại sao không? (Tôi không có vấn đề này trên các máy tính khác)

đây là một số trong những Tôi đang mã sử dụng:

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: Tôi có vấn đề này chỉ trong Firefox (Nó rất cập nhật)

Answer 1

Tôi không chắc chắn, nhưng nếu mã này hoạt động trên các PC khác trong FireFox thì có thể bạn đã có phiên bản cũ của trình duyệt FireFox hoặc gọi document.getElementById trước thẻ cavas với id "layer2" để tải. Vấn đề khác mà tôi nhận thấy là bạn sử dụng các số phao không có số 0 đứng đầu. Ví dụ 0,5 thay vì 0,5. Điều gì sẽ xảy ra khi bạn chạy mã này?

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

Sau khi tìm kiếm tháng tôi hiện có câu trả lời cho câu hỏi khó nắm bắt này. Mozilla đã thay đổi cách gradient làm tròn của họ hoạt động. Để tạo một gradient xuyên tâm đơn giản, bạn không còn cần tạo đường dẫn nữa. Bạn chỉ cần điền vào một hình chữ nhật để thay thế. Xem ví dụ dưới đây:

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

Phương pháp này cực kỳ hiệu quả hơn so với việc tạo đường dẫn với độ dốc xuyên tâm. Mặc dù, tôi cũng có thể thấy phương pháp này hạn chế hơn một chút đối với các nhà phát triển. Xem ví dụ này từ mạng nhà phát triển của Mozilla để có ví dụ tốt hơn: https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

Answer 3

Tôi đã tìm thấy sự cố lạ trong Firefox với SVG và radialGradients. Nếu tôi xác định điền vào một lớp CSS và nhúng CSS vào tài liệu nó hoạt động tốt, tuy nhiên nếu tôi di chuyển CSS vào một tệp riêng biệt và sử dụng thẻ 'link' để bao gồm CSS, thì radialGradient không hoạt động. Điều này có vẻ là một lỗi trong Firefox vì nó hoạt động trong Chrome, Safari, Opera và thậm chí cả IE, nhưng không phải trong Firefox.