2010-04-18 9 views
4

캔버스 HTML5 개체를 가지고 놀기 시작했습니다. 성능 테스트를 위해 약간 ping pong game을 만들었습니다.HTML 5 캔버스 성능

사용할 수있는 성능이 개선 되었습니까?

공이 파란색으로 보이지만 빨간색으로 표시되어야합니다. 이 문제를 어떻게 해결할 수 있습니까?

+4

질문 하시겠습니까? 어떤 문제를 특별히 해결하려고합니까? – Robusto

+0

+1 스크립트 – yassin

+0

나는 노란 색으로 내 공을 채우려하지만, 어떻게 든 푸른 색이된다. 노를 젓는 것처럼 ... – Vilius

답변

4

공 색깔에 도움이됩니다.

function drawBall (x, y, r) { 
    ctx.beginPath(); 
    ctx.fillStyle = "yellow"; 
    ctx.arc(x, y, r, 0, Math.PI*2, false); 
    ctx.closePath(); 
    ctx.fill(); //added 
    fps++; 
} 

function drawP1 (h) { 
    ctx.fillStyle = '#FF0000'; 
    ctx.fillRect(0, h, 20, 100); 
    //ctx.fill(); // remove in P2 also 
    fps++; 
    return true; 
}; 

fill()은 fillRect()에 적용되지 않으며 후자는 채워진 rectagle을 그리며 fill()는 pathes를 채 웁니다.

  • fillStyle에서는/strokeStyle 호출이 비싸다, 전환 색상을 피하기 :

    당신이 간단한 탁구 게임을 향상시킬 수 있습니다,하지만 난 캔버스 성능에 대한 몇 가지 일반적인 조언을 줄 것이다 많은이 아니다.

  • 복잡한 모양을 그리는데도 비용이 많이 듭니다. 당신이 다음 그리기 및 렌더링 처리 분리 유지하기 위해 그들에게
  • 시도를 렌더링하는 픽셀 API를 사용할 수 있습니다, 이것은 개선을 위해
  • 높은 FPS 게임을위한 순수한 JS를 사용하려고/애니메이션을 사용하면 공간을 제공합니다

마찬가지로, 매우 일반적인 조언과 모든 경우에 적절하지 않을 수도 있습니다.

+0

그냥 시도해보세요.하지만 차이는 없습니다. 그리고 mozilla-homepage에서 말했듯이 : "참고 : fill 메소드를 호출 할 때 열린 모양은 자동으로 닫히고 closePath 메소드를 사용할 필요가 없습니다." - 나는 그것을 얻지 못한다. 왜 작동하지 않는가? – Vilius

+0

--- 편집 : 유용한 힌트를 주셔서 감사합니다. – Vilius

+0

흠, 나 자신도 시험해 보았고 나에게도 효과가 없었습니다. 문제를 찾을 수 없습니다 .. – elias