HTML 5 performances Toile

Question

Je suis juste commencé à jouer avec la toile HTML5-objet. Pour des raisons de tests de performance, je l'ai fait un peu jeu de ping-pong .

Y a-t-il des améliorations de performance que je pourrais utiliser?

La balle semble être bleu avec une touche de rouge, mais ma déclaration, il devrait être jaune. Comment puis-je résoudre ce problème?

Answer 1

Cela devrait vous aider avec la couleur de la balle;

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 () n'a pas pour effet fillRect (), celui-ci est un dessin rectagle rempli et remplissage () consiste à remplir chemins.

Il n'y a pas grand-chose que vous pouvez améliorer avec un jeu de pong simple, mais je vais vous donner quelques conseils généraux pour la performance de la toile:

• appels fillStyle / strokeStyle sont chers, évitez les couleurs de commutation.
• dessin de formes complexes est trop cher,. vous pouvez dessiner et ensuite utiliser le api de pixel pour les rendre
• essayer de garder le rendu et le traitement séparés, cela vous donnera l'espace pour des améliorations
• essayez d'utiliser js pur pour les hautes jeux FPS / animations

Comme l'a dit, des conseils très généraux et pourrait ne pas convenir à tous les cas.