Javascript 为什么画布在chrome中工作，而不是firefox？_Javascript_Html_Canvas_Parallax_Requestanimationframe

Javascript 为什么画布在chrome中工作，而不是firefox？

javascript html canvas

Javascript 为什么画布在chrome中工作，而不是firefox？,javascript,html,canvas,parallax,requestanimationframe,Javascript,Html,Canvas,Parallax,Requestanimationframe,我正在开发一个利用视差滚动的网站。它在chrome中看起来很漂亮，但我想画到画布上的图像都没有在firefox中渲染。我很困惑以下是HTML： <!DOCTYPE html> <html> <head> <meta charset='utf8'> <link rel='stylesheet' type='text/css' href='style.css'> </head> <body>

我正在开发一个利用视差滚动的网站。它在chrome中看起来很漂亮，但我想画到画布上的图像都没有在firefox中渲染。我很困惑

以下是HTML：

<!DOCTYPE html>

<html>

<head>
    <meta charset='utf8'>
    <link rel='stylesheet' type='text/css' href='style.css'>
</head>

<body>
    <canvas id='canvas' width="400" height="200"></canvas>
    <img id='dog' src='dog.gif'>

    <script src='script.js'></script>
</body>

</html>

谢谢大家!

我认为firefox还没有准备好展示良好的性能，因为我通过在不同的操作系统和firefox的最新版本中运行游戏来检查不同的pc和我得到20帧每秒

当我用chrome运行同一个游戏时，我获得了60 fps

你可以自己尝试运行这个游戏

在左边的顶部，你会看到小窗口测试仪，你在firefox中的表现是30

我觉得很糟糕。

那么，你有什么错误吗？奇怪的是，我在控制台中没有看到任何错误。没有一个我不知道发生了什么事。

  //  shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.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 canvas = $('#canvas');
    var ctx = canvas.getContext('2d');
  var dog = $('#dog');
  var ticking = false;
  var relativeY = win.scrollY / h;

  function updateElements(){
    ctx.drawImage(dog, 10, pos(50, 0, relativeY, 0));
  };

  function paint(){
    requestAnimFrame(updateElements)
  };

  function onScroll(){
    if(!ticking){
      ticking = true;
      requestAnimFrame(updateElements);
      var lastScrollY = win.scrollY;
    }
  }

    function pos(base, range, relY, offset) {
    return base + limit(0, 1, relY - offset) * range;
  }

  function limit(min, max, value) {
    return Math.max(min, Math.min(max, value));
  }

  win.addEventListener('load', paint, false);
  win.addEventListener('scroll', onScroll, false);

})(window, document);