Html Firefox跳过在画布中呈现文本_Html_Firefox_Canvas_Html5 Canvas

Html Firefox跳过在画布中呈现文本

html firefox canvas html5-canvas

Html Firefox跳过在画布中呈现文本,html,firefox,canvas,html5-canvas,Html,Firefox,Canvas,Html5 Canvas,请查找下面的JSFIDLE以供参考 Javascript（FF） var c=document.getElementById（“myCanvas”）； var ctx=c.getContext（“2d”）； ctx.font=“30px Arial”； var计数器=0； c、 addEventListener（'DOMMouseScroll'，函数（事件）{ draw（）；返回false； }，假）；函数draw（）{ var j=++计数器；对于（变量i=0；i

请查找下面的JSFIDLE以供参考

Javascript（FF）

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.font=“30px Arial”；
var计数器=0；
c、 addEventListener（'DOMMouseScroll'，函数（事件）{
draw（）；
返回false；
}，假）；
函数draw（）{
var j=++计数器；
对于（变量i=0；i<10000；i++）{
ctx.clearRect（0，0，c.宽度，c.高度）；
ctx.fillText（“你好世界”+j，10,50）；
}
}

Javascript（Chrome）

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.font=“30px Arial”；
var计数器=0；
c、 addEventListener（'mousewheel'，函数（事件）{
draw（）；
返回false；
}，假）；
函数draw（）{
var j=++计数器；
对于（变量i=0；i<10000；i++）{
ctx.clearRect（0，0，c.宽度，c.高度）；
ctx.fillText（“你好世界”+j，10,50）；
}
}

HTML


在画布下方滚动


您的浏览器不支持HTML5画布标记。

现在试着在上面的小提琴上用鼠标滚轮快速滚动，你会发现数字在Firefox中被跳过，而Google Chrome在不跳过数字的情况下平滑渲染

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

这可能不是您想要的，但我无法理解为什么您在

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

我强烈建议在这里发布代码（以及到JSFIDLE的链接）。关于如何最大限度地减少JSFIDLE的使用，并编写一个具体的问题/答案供其他用户理解，有很多讨论。由于链接可能会被删除，JSFIDLE会更改其URL方案，不再存在，被购买并更改其名称，或者出现大的中断。这里有一些与讨论相关的链接：为什么你要画同样的东西10万次？@Steven:OP在发布问题时已经得到了这个建议（实际上是来自SO的警告）。他没有这样做，而是确保他的小提琴不会被渲染成链接，这样警告就不会出现了。在有人怀疑之前，如果忽略缩进，两个小提琴是相同的。向下投票…@shmiddy:我什么也没画10k次，只是想表明在firefox中渲染被跳过，而chrome渲染则是平滑的。@WladimirPalant:我已经将代码snippnet与JSFIDLE一起粘贴了

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

<!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>

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