2016-03-26 5 views
0

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

"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); 
      } 
     }); 
    } 
+0

Sie eine Bibliothek mit Cross-Browser-Kompatibilität nutzen könnten. Dieser ist leicht und hauptsächlich für Bildzeichnen/Animation: http://iio.js.org/ – Cbas

+2

Hit 'F12' und überprüfen Sie die Konsole auf Fehler, FF ist nicht so fehlerverzeihend wie andere Browser, wenn es um JavaScript geht und dies könnte naja, ein Codefehler, aber ohne den Rest des Codes bin ich nur raten. – Blindman67

+0

Keine Fehler, nichts, nur nicht das Bild zu zeichnen! –

Antwort

0

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>

+0

Vielen Dank !!!!! –

+0

Gern geschehen – printfmyname