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);
}
});
Опять же, любая помощь будет принята с благодарностью. Благодарю.