html5 - Firefox在Canvas中跳过渲染文本 - Thinbug

Firefox在Canvas中跳过渲染文本

时间：2012-11-09 14:03:04

标签： html5 firefox canvas html5-canvas

请在下面找到jsfiddle以供参考

jsFiddle for Mozilla Firefox

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 for Google Chrome

Javascript（Chrome）

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>

现在尝试在上面的小提琴上使用mouseWheel在画布上快速滚动，你会发现在Firefox中跳过了数字，而谷歌浏览器在没有跳过数字的情况下顺利渲染。

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

1 个答案:

答案 0 :(得分：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);
    })();
})();