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很重要的问题，

setInterval需要一个间隔值，我将其设置为1ms
未定义变量alpha。我将它定义为0.01（你可能想创建一个局部变量，我把它作为一个全球变量）

在FF上测试过。 https://jsfiddle.net/rg1uyw1p/5/

＆＃13;

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"));

＆＃13;

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

＆＃13;

HTML5 Canvas：drawImage无法在Firefox上运行

1 个答案: