使用canvas和requestAnimationFrame可以在Chrome中使用,但不适用于Firefox

时间:2013-02-12 04:15:34

标签: javascript html5 canvas requestanimationframe

我正在通过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;

}

0 个答案:

没有答案