Firefox에서 천천히 html5 그리기

Try the code은 크롬과 파이어 폭스에서 10000 라인을 그립니다. 파이어 폭스에서는 매우 느리게 실행됩니다 (3-4 초). 크롬에서는 훨씬 빠르게 실행됩니다. 나는 수천 줄의 줄을 프레임으로 그린 어플리케이션을 작성하고 있습니다. 파이어 폭스를 가속화하는 방법을 아는 사람이 있습니까? (파이어 폭스의 하드웨어 가속은 swith이다).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의 실행 속도가 빠른 V8 js 컴파일러를 사용하는 Chroome과 같은 다른 브라우저와 비교할 때 느린 이유는 무엇입니까? 이것이 심지어 간단한 캔버스 작업에도 영향을 줄 수 있는지 궁금합니다. –

당신은 아마 각 루프 반복의 시작 부분에 "하기 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>

그러나 당신이 말했듯이 때문에에, 주로 파이어 폭스에서 버그를 공개 한 생각 다른 브라우저는 정상입니다.

출처

2012-07-29 09:30:29 dsign

답변 해 주셔서 대단히 감사합니다. 실제로 도움이됩니다! – David

Firefox에서 천천히 html5 그리기

답변

관련 문제