缓慢的html5在火狐中绘图

Try the code以下在Chrome和Firefox中绘制10000行。在Firefox中，它的运行速度非常慢（3-4秒），在Chrome中运行得更快。我正在编写应用程序，在框架中绘制成千上万行的动画。有谁知道如何加速Firefox？（Firefox中的硬件加速开启）。缓慢的html5在火狐中绘图

<!DOCTYPE html> 
<body> 
<html> 
<canvas id="myCanvas"></canvas> 
</html> 
</body> 
<script> 
    var canvas=document.getElementById("myCanvas"); 
    var context=canvas.getContext("2d"); 
    canvas.width=1000; 
    canvas.height=600 
    context.strokeStyle="black"; 
    context.lineWidth=0.3; 
    context.fillStyle="#8ED6FF"; 
    context.fillRect(0,0,1000,800); 
    var N=10000; 
for (var i=0;i<N;i++){ 
    context.moveTo(500,300); 
    context.lineTo(500+200*Math.cos(6.28*i/N),300-200*Math.sin(6.28*i/N)); 
} 
context.stroke(); 
</script>

来源

2012-07-29 David

难道原因就在于FireFox js的执行速度比其他浏览器如Chroome的V8 js编译器速度慢吗？只是想知道这是否会影响一些简单的画布操作.. – 2012-12-08 18:07:00

你或许可以用“beginPath方法”的呼叫，在每次循环的开头：

<!DOCTYPE html> 
<html> 
<body> 
<canvas id="myCanvas"></canvas> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 

    var canvas=document.getElementById("myCanvas"); 
    var context=canvas.getContext("2d"); 
    canvas.width=1000; 
    canvas.height=600 
    context.strokeStyle="black"; 
    context.lineWidth=0.3; 
    context.fillStyle="#8ED6FF"; 
    context.fillRect(0,0,1000,800); 
    var N=10000; 
for (var i=0;i<N;i++){ 
    context.beginPath(); 
    context.moveTo(500,300); 
    context.lineTo(500+200*Math.cos(6.28*i/N),300-200*Math.sin(6.28*i/N)); 
    context.stroke(); 
} 

    }); 
</script> 

</body> 
</html>

但是，我认为主要是你已经发现在Firefox中的错误，因为如你所说，在其他浏览器就好了。

来源

2012-07-29 09:30:29 dsign

非常感谢您的回答。其实它有帮助！ – David 2012-07-29 09:54:27

缓慢的html5在火狐中绘图

回答

相关问题