HTML5畫布：drawImage無法在Firefox上工作

此代碼在Chrome，opera yandex和ie瀏覽器中工作，但無法在Firefox上運行。HTML5畫布：drawImage無法在Firefox上工作

代碼中的「el」是我的圖片（存儲爲這樣的<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); 
      } 
     }); 
    }

來源

2016-03-26 Vahagn Sargsyan

你可以使用跨瀏覽器兼容的庫。這是一個輕量級的，主要用於圖像繪製/動畫：http：//iio.js.org/ – Cbas

點擊'F12'並檢查控制檯是否有錯誤，當涉及到JavaScript時FF不像其他瀏覽器那樣寬容，以及代碼錯誤，但沒有其餘的代碼，我只是猜測。 – Blindman67

雖然沒有錯誤，但沒有什麼只是沒有繪製圖像！ –

兩個問題的事項給火狐，

的setInterval需要一個間隔值i將其設置爲1毫秒
變量阿爾法沒有定義。我將它定義爲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>

來源

2016-03-26 20:21:28 printfmyname

非常感謝!!!!! –

不客氣 – printfmyname

HTML5畫布：drawImage無法在Firefox上工作

回答

相關問題