X
點擊此處開啟此網站的行動版。

技術支援討論區

Firefox skips rendering text in Canvas

已張貼

Please find below jsfiddle for reference

jsFiddle for Mozilla Firefox -- http://jsfiddle.net/ranu_mandan/EBmdf/

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 -- http://jsfiddle.net/ranu_mandan/mk5rZ/

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>

Now try Scrolling fast using mouseWheel on canvas on above fiddles , you will find numbers are skipped in Firefox , whereas Google Chrome renders smoothly without skipping the numbers.

How to make rendering similar to Google Chrome in Firefox browser ?

Please find below jsfiddle for reference jsFiddle for Mozilla Firefox -- http://jsfiddle.net/ranu_mandan/EBmdf/ Javascript (FF) <br /> <pre><nowiki>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); } } </nowiki></pre> jsFiddle for Google Chrome -- http://jsfiddle.net/ranu_mandan/mk5rZ/ Javascript (Chrome) <br /> <pre><nowiki>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); } } </nowiki></pre> HTML <br /> <pre><nowiki><!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></nowiki></pre> Now try Scrolling fast using mouseWheel on canvas on above fiddles , you will find numbers are skipped in Firefox , whereas Google Chrome renders smoothly without skipping the numbers. How to make rendering similar to Google Chrome in Firefox browser ?

由 cor-el 於 修改

額外的系統細節

已安裝的外掛程式

  • Intel web components updater - Installs and updates the Intel web components
  • Intel web components for Intel® Identity Protection Technology
  • Adobe PDF Plug-In For Firefox and Netscape 10.1.1
  • 4.0.50826.0
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • Office Authorization plug-in for NPAPI browsers

應用程式

  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0) Gecko/20100101 Firefox/13.0.1

更多資訊

cor-el
  • Top 10 Contributor
  • Moderator
17416 個解決方法 157344 個答案

A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.

The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.

A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum. *http://forums.mozillazine.org/viewforum.php?f=25 The helpers at that forum are more knowledgeable about web development issues.<br> You need to register at the MozillaZine forum site in order to post at that forum.