el rendimiento de HTML 5 lienzo

Question

Sólo estoy comenzó en jugar un poco con el canvas de HTML5 a objetos. Por el bien de las pruebas de rendimiento, he hecho un poco de de ping-pong juego .

¿Hay mejoras en el rendimiento que pueda usar?

La bola parece ser azul con un toque de rojo, pero mi declaración debe ser de color amarillo. ¿Cómo puedo solucionar este problema?

Answer 1

Esto debería ayudarle con el color de la 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;
};

relleno () no se aplica a fillRect (), el último está dibujando un rectagle y relleno de llenado () es llenar pathes.

No hay mucho que puede mejorar con un simple juego de pong, pero voy a dar algunos consejos generales para el funcionamiento de la lona:

• llamadas fillStyle / strokeStyle son caros, colores conmutación evitar.
• dibujar formas complejas es caro, también. se puede dibujar y luego utilizar la API de píxeles para hacerlos
• tratar de mantener la representación y procesamiento separados, esto le dará espacio para mejoras
• tratar de usar JS puros de alta juegos FPS / animaciones

Como se dijo, consejos muy generales y podría no ser apropiada para cada caso.