爲什麼畫布在Chrome中工作，但不是Firefox？

我正在開發一個利用視差滾動的網站。它看起來很漂亮，但我想繪製到畫布上的圖像都沒有在Firefox中渲染。我迷失了方向。爲什麼畫布在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>

和JavaScript：

// 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);

謝謝！

來源

2013-02-12 jeraiser

那麼，你有任何錯誤？ – Cerbrus 2013-02-12 15:55:57

這是奇怪的事情，我看到控制檯中沒有錯誤。沒有！我不知道發生了什麼事。 – jeraiser 2013-02-12 16:14:19

我認爲火狐沒有準備好，顯示良好的表現，因爲我通過一些不同勢調度研究系統和firefox 的最後一個版本和不同勢PC乳寧遊戲檢查，我也得到20 fps的

當我運行相同遊戲

鉻我得到了60 fps的

，你可以嘗試一下在左側運行此遊戲tester

頂部，你會看到小窗口測試看看你在Firefox的表現將是30 我覺得不好。

來源

2013-02-12 19:59:52 user1954217

爲什麼畫布在Chrome中工作，但不是Firefox？

回答

相關問題