HTML 5 Performance de tela

Question

Eu apenas comecei a brincar com o objeto HTML5 do Canvas. Por uma questão de testes de desempenho, eu fiz um pouco jogo de pingue -pongue.

Existem melhorias de desempenho que eu poderia usar?

A bola parece ser azul com um toque de vermelho, mas minha declaração deve ser amarela. Como posso consertar isso?

Answer 1

Isso deve ajudá -lo com a cor da bola;

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;
};

preenchimento () não se aplica ao FillRect (), este último está desenhando um retágue e preenchimento preenchido () é preencher os caminhos.

Não há muito que você possa melhorar com um jogo simples de pong, mas darei a alguns conselhos gerais para o desempenho da tela:

• As chamadas de FillStyle/Strokestyle são caras, evite alterar as cores.
• Desenhar formas complexas também é caro. Você pode desenhar então e usar a API do Pixel para renderizá -los
• Tente continuar renderizando e processando separados, isso lhe dará espaço para melhorias
• Tente usar JS puro para jogos/animações de alto FPS

Como dito, conselhos muito gerais e podem não ser apropriados para todos os casos.