HTML5 Canvas：drawImage在Firefox上不起作用

Question

該代碼可在chrome，opera yandex和瀏覽器中運行，但無法在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);
            }
        });
    }

Answer 1

Firefox重要的兩個問題：

1. setInterval需要一個間隔值，我將其設置為1ms
2. 未定義變量alpha。 我將其定義為0.01（您可能想創建一個局部變量，我將其作為globle）

在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 { 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>