我正在通过HTML5 canvas元素构建一个带有视差滚动的网页。它在chrome中工作得非常漂亮,但是画布根本不适用于firefox。我的javascript中有什么东西需要更改吗?
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
windo.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
(function(win, d){
var $ = d.querySelector.bind(d);
var w = window.innerWidth;
var h = d.height;
var ticking = false;
var canvas = $('canvas');
var ctx = canvas.getContext('2d');
var backGround = $('#backGround');
var logo = $('#logo');
function onResize(){
var w = win.innerWidth;
var h = d.height;
canvas.width = 1000;
canvas.height = win.innerHeight;
updateElements();
}
function onScroll(){
if(!ticking){
ticking = true;
requestAnimFrame(updateElements);
var lastScrollY = win.scrollY;
}
}
function updateElements(){
var relativeY = win.scrollY / h;
var logoY = 0;
if(window.scrollY < 1200){
var logoYSpeed = 1800;
var logoYPos = 50;
}else{
var logoYSpeed = -6500;
var logoYPos = 817;
};
ctx.fillStyle = "#1e2124";
ctx.fillRect(0, 0, w, h);
ctx.drawImage(backGround, 0, pos(0, -3500, relativeY, 0));
ctx.drawImage(logo, 350, pos(logoYPos, logoYSpeed, relativeY, 0));
ticking = false;
}