2010-12-15 6 views
1

내 캔버스 애니메이션은 얼음처럼 부드럽지만 파이어 폭스의 나쁜 이발로 고르지 않습니다. 가장 이상한 것은 계산이 복잡하지 않다는 것입니다. 누구든지 내 속도 저하를 일으킬 수있는 코드와 함께 잘못된 (성능 관련) 것을 본 적이 있습니까?캔버스의 고르지 않은 애니메이션

는 여기가 jsfiddle에 : http://jsfiddle.net/Wu5Jh/

를 그리고 여기 너무입니다 : 나는 플래시 애니메이션 또는 GIF를 피하기 위해 기대했다

$(document).ready(function(){ 
    //vars 
    var x = 20, 
      y = 20, 
      pi = Math.PI, 
      width, 
      height, 
      complete = 100, 
      refreshInterval, 
      ctx; 

    // computed vars 
    function init() { 
     ctx = $('#canvas')[0].getContext("2d"); 
     width = $("#canvas").width(); 
     height = $("#canvas").height(); 
     center = [width/2, height/2]; 
     refreshInterval = (function doSetTimeout(){ 
      draw(); 
      setTimeout(doSetTimeout, 30); 
      })(); 
     }; 

    function circle(x,y,r) { 

     // Draw the growing circle 
     ctx.fillStyle = "#09f"; 
     ctx.beginPath(); 
    ctx.moveTo(x, y); // center of the pie 
     ctx.arc(
      x, 
      y, 
      r, 
      -2*pi*complete/100 + pi*1.5, 
      -pi*.5, 
      true 
     ); 
     ctx.lineTo(x, y); 
     ctx.closePath(); 
     ctx.fill(); 

     // Draw the cutout 
     ctx.globalCompositeOperation = "xor"; 
     ctx.fillStyle = "#fff"; 
     ctx.beginPath(); 
     ctx.arc(x,y,r/2,0,pi*2,true); 
     ctx.fill(); 
    } 

    function clear() { 
     ctx.clearRect(0, 0, width, height); 
    } 

    function timeCheck(){ 
     if (complete>0){ 
      complete -= 1; 
     } 
     else { 
      clearInterval(refreshInterval); 
     } 
    } 

    function draw() { 
     clear(); 
     circle(x, y, 20); 
     timeCheck(); 
    } 

    init(); 

}); 

,하지만 난 선택의 여지가 있습니다.

감사합니다.

+0

Firefox 3.6.12에서 나에게 잘 보입니다. – Reigel

+0

정말요? 그것은 3.6.13, PC – Matrym

+0

에서 약 3 점을 나를 위해 위로 커브 그것은 컴퓨터의 사양 및 현재로드에 크게 의존 고려하십시오. – Orbling

답변

1

정말 문제가 없는데 Linux에서 Chromium 8 및 Firefox 3.6.13을 사용하고 있습니다.

그러나 여전히 미세 최적화에 대한 제안이 필요한 경우 -2*pi/100, 1.5*pi.5*pi과 같은 것을 고유 한 상수로 사용할 수 있습니다. 또한 이는 단지 추측이지만 ctx.globalCompositeOperation"xor" 대신 "copy"을 사용하는 것이 더 빠를 수도 있습니다. 그려진 첫 번째 호에 대해 계산 된 원호 각도를 저장하고 전체 원을 그리는 것보다 두 번째 호에도 사용할 수 있습니다.

관련 문제