DrawImage не выполняется должным образом в Firefox (работает в IE и Chrome)

Я работаю над своего рода анимированной заставкой, где объект начинается с малого и выплескивается на экран. Эффект работает в Chrome и Internet Explorer, как и предполагалось, но у меня, похоже, возникают проблемы с выполнением кода в Firefox. Я считаю, что он перестает работать в строке, которая выполняет функцию ctx.drawImage(), так как на странице ничего не анимируется.

Вот код, с которым я работаю (извините, он немного грязный):

$(document).ready(function() {  
    $('.content').hide();       
    var ctx = document.getElementById('canvas').getContext('2d');

    window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

    var myBool = false;
    var count = 15;
    var win = new Image();
    var splash;
    splash = new Image();
    splash.onload = function () {
        ctx.drawImage(win, 0, 0);
    }
    splash.src = "../../../../../Media/splash.png";

    animate();

    function animate() {
        if (count >= 1) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save();
            ctx.drawImage(win, 0, 0);
            ctx.globalCompositeOperation = 'destination-over';
            ctx.drawImage(splash, 0, 0, splash.width, splash.height, 0, 0, splash.width / count, splash.height / count);
            ctx.restore();
        }

        requestAnimFrame(function () {
            if (count < 1)
            {
                finishIt(); 
            }
            else
            {
                count--;
                animate();
            }
        });         
    }

    function finishIt()
    {
        ctx.drawImage(splash, 0, 0, splash.width, splash.height, 0, 0, splash.width + 300, splash.height);
        ctx.drawImage(splash, 0, 0, splash.width, splash.height, 0, 0, splash.width + 300, splash.height);
        myBool = false;
        $('.content').fadeIn(1000); 
    }
 });

Опять же, любая помощь будет принята с благодарностью. Благодарю.

0 ответов

Другие вопросы по тегам