0

请在下面找到 jsfiddle 以供参考

用于 Mozilla Firefox 的 jsFiddle

Javascript (FF)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";

var counter = 0;
c.addEventListener('DOMMouseScroll',function(event){

    draw();

    return false;

}, false);

function draw(){   

   var j = ++counter;
   for(var i = 0; i < 10000; i++){
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.fillText("Hello World " + j ,10,50);
   }

 }

用于谷歌浏览器的 jsFiddle

Javascript（铬）

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";

var counter = 0;
c.addEventListener('mousewheel',function(event){

   draw();

   return false;

}, false);

function draw(){   

  var j = ++counter;
  for(var i = 0; i < 10000; i++){
   ctx.clearRect(0, 0, c.width, c.height);
   ctx.fillText("Hello World " + j ,10,50);
  }
}

HTML

<!DOCTYPE html>
<html>
<body>
<span>Scroll on below canvas</span>
<br/>    
<canvas id="myCanvas" width="600" height="100" style="border:5px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>

现在尝试在上面的 fiddles 的画布上使用 mouseWheel 快速滚动，您会发现在 Firefox 中跳过了数字，而 Google Chrome 可以流畅地渲染而不会跳过数字。

如何在 Firefox 浏览器中进行类似于 Google Chrome 的渲染？

4

1 回答 1

1

http://jsfiddle.net/mk5rZ/2/

这可能不是您想要的，但我无法理解您为什么要在您的draw方法中绘制 10k 次相同的东西。

window.requestAnimFrame = function(callback) {
    window.setTimeout(callback, 1000 / 60);
};
(function wheely() {
    var c = document.getElementById("myCanvas"),
        ctx = c.getContext("2d"),
        cnt = 0;

    ctx.font = "30px Arial";

    if ('onmousewheel' in c) c.addEventListener('mousewheel', wheeled, false);
    else c.addEventListener('DOMMouseScroll', wheeled, false);

    function wheeled(event) {
        cnt++;
        return false;
    }
    (function draw() {
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.fillText("Hello World " + cnt, 10, 50);

        window.requestAnimFrame(draw);
    })();
})();​
于 2012-11-09T16:12:15.957 回答