HTML5 画布：drawImage 在 Firefox 上不起作用答案

【问题标题】：HTML5 Canvas: drawImage not working on FirefoxHTML5 画布：drawImage 在 Firefox 上不起作用
【发布时间】：2016-03-26 18:00:37
【问题描述】：

这段代码在 chrome、opera yandex 和 ie 浏览器中运行，但在 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);
            }
        });
    }

【问题讨论】：

您可以使用具有跨浏览器兼容性的库。这个是轻量级的，主要用于图像绘制/动画：iio.js.org
点击F12 并检查控制台是否有错误，当涉及到 JavaScript 时，FF 不像其他浏览器那样宽容，这很可能是一个代码错误，但没有我的其余代码但猜测。
没有错误，只是没有绘制图像！
需要一个测试用例。我记得唯一相关的是其他来源的数据可能不会绘制在画布上，以防止泄露用户的数据。
当您不包含 setInterval 第二个参数（以毫秒为单位的时间）时，FF 的行为与 Chrome 不同，Chrome 触发非常快，而 FF 触发一次然后什么也不做。我没等多久就知道了，但一分钟多一点。

标签： javascript html canvas drawimage

【解决方案1】：

对 Firefox 很重要的两个问题，

setInterval 需要一个间隔值，我将其设置为 1ms
变量 alpha 未定义。我将它定义为 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 {
            		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>

【讨论】：