HTML5 Canvas: 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);
            }
        });
    }

javascript canvas html drawimage
person Vahagn Sargsyan    schedule 26.03.2016    source источник
comment
вы можете использовать библиотеку с кросс-браузерной совместимостью. Этот легкий и в основном предназначен для рисования/анимации изображений: iio.js.org   -  person Cbas    schedule 26.03.2016
comment
Нажмите F12 и проверьте консоль на наличие ошибок, FF не так прощает, как другие браузеры, когда дело доходит до JavaScript, и это вполне может быть ошибкой кода, но без остального кода я только догадываюсь.   -  person Blindman67    schedule 26.03.2016
comment
Никаких ошибок, ничего, просто не рисует изображение!   -  person Vahagn Sargsyan    schedule 26.03.2016
comment
Нужен тесткейс. Единственное, что я помню, это то, что данные из других источников нельзя рисовать на холсте, чтобы предотвратить утечку данных пользователя.   -  person Nickolay    schedule 26.03.2016
comment
FF ведет себя иначе, чем Chrome, когда вы не включаете второй аргумент setInterval (время в мс). Chrome срабатывает очень быстро, в то время как FF срабатывает один раз, а затем ничего не делает. Я не ждал долго, чтобы узнать, но больше минуты.   -  person Blindman67    schedule 26.03.2016

Ответы (1)


arrow_upward
0
arrow_downward

Две проблемы, которые важны для Firefox,

  1. setInterval нужно значение интервала, я установил его на 1 мс
  2. Переменная альфа не определена. Я определил его равным 0,01 (возможно, вы захотите создать локальную переменную, у меня она как глобальная)

Проверено на ФФ. 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>

person printfmyname    schedule 26.03.2016