HTML5 Canvas：drawImageがFirefoxで動作しません

Question

このコードはchrome、opera yandex、つまりブラウザで動作しますが、Firefoxでは動作しませんでした。

コードの "el"は私の画像です（<img src="background.png"のように保存されています）。 Firefoxのに重要

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

2つの問題、

1. たsetIntervalは、私は1msの
2. 変数アルファに設定間隔値は定義されていませんが必要です。私はそれを0.01に定義しました（あなたはローカル変数を作成したいかもしれませんが、私はそれをグロブラグとして持っています）

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>