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

 }

Google Chrome の 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/

これはあなたが望むものではないかもしれませんが、あなたの方法で同じものを1万回描画していた理由がわかりませんdraw.

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 に答える