HTML5 Canvas: drawImage funktioniert nicht unter Firefox

Question

Dieser Code funktioniert in Chrome, Opera Yandex und IE-Browsern, konnte jedoch nicht auf Firefox ausgeführt werden.

"el" im Code ist mein Bild (gespeichert wie diese <img src="background.png").

fadeIn: function(el){ 
     var self = this; 

     var alpha = 0; 
     var interval = window.setInterval(function(){ 
      if (alpha < 1){ 
       self.ctx.clearRect(0, 0, Lottery.Canvas.width, Lottery.Canvas.height); 
       alpha += 0.01; 
       self.ctx.globalAlpha = alpha; 
       self.ctx.drawImage(el, 0, 0); 
      } else { 
       clearInterval(interval); 
      } 
     }); 
    } 

Answer 1

zwei Probleme, die zu den folgenden Angelegenheiten

1. setInterval benötigen einen Intervallwert i es
2. Variable alpha zu 1ms gesetzt ist nicht definiert. Ich definierte es auf 0.01 (Sie könnten eine lokale Variable erstellen, ich habe es als globle)

Getestet auf FF. https://jsfiddle.net/rg1uyw1p/5/

var editor = { 
 
ctx : "", 
 
fadeIn: function (el){ 
 
     var self = this; 
 
     var interval = window.setInterval(function(){ 
 
      if (alpha < 1){ 
 
       self.ctx.clearRect(0, 0, Lottery.Canvas.width, Lottery.Canvas.height); 
 
       alpha += 0.1; 
 
       self.ctx.globalAlpha = alpha; 
 
       self.ctx.drawImage(el, 0, 0); 
 
       console.log("ALPHA: " + alpha); 
 
      } else { 
 
      \t \t console.log("CLEAR: " + alpha); 
 
       clearInterval(interval); 
 
      } 
 
     },1); 
 
    }, 
 
}; 
 
Lottery = {}; 
 
alpha = 0.01; 
 
Lottery.Canvas = document.getElementById("canvas"); 
 
editor.ctx = Lottery.Canvas.getContext("2d"); 
 
editor.fadeIn(document.getElementById("img"));

<img id="img" src="http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-logo-med.png?v=6f86a5fa447f"> 
 
<canvas id="canvas" width="500" height="500"></canvas>