[英]Why is canvas working in chrome, but not 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);
謝謝!
我認為firefox尚未准備好顯示良好的性能,因為我通過在一些不同的opop系統以及最新版本的firefox和diffrent pc中運行游戲進行檢查,因此我得到了20 fps
當我用Chrome運行同一游戲時,我得到了60 fps
您可以自己嘗試運行此游戲測試儀
在左側頂部,您會看到一個小窗口測試器,在Firefox中您的性能將達到30,我認為這很糟糕。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.