HTML 5 캔버스 성능

Question

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

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

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

Answer 1

공 색깔에 도움이됩니다.

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를 사용하려고/애니메이션을 사용하면 공간을 제공합니다

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