J'essaye de faire un jeu simple (vue d'en haut) sur la toile. Se il vous plaît dites-moi, ce qui est plus rapide:Comment plusieurs éléments de canevas affectent les performances?
1) Dessinez tout sur un <canvas> et calculer les zones qui doivent être redessinés. 2) Dessinez certaines parties de la scène sur différents éléments <canvas> et ne les mettez à jour que si nécessaire. Dans la variante it, probablement, je peux aussi utiliser un redraw partiel. Par exemple, je pourrais dessiner une carte sur un élément, des ennemis sur le second, et un curseur et etc. sur le troisième. Lorsque je déplaçais des ennemis, je pouvais seulement redessiner la deuxième toile.
Veuillez expliquer avec le plus de détails possible quelle option est la meilleure et pourquoi. Et pourriez-vous s'il vous plaît conseiller des livres qui peuvent approfondir mes connaissances sur cette question? Pour les débutants.
Comme votre question est sans réponse car elle dépendra de ce que le code doit faire. La complexité ne fait que travailler pour le CPU. Restez simple pour la performance. La plupart des jeux utilisent un canevas d'affichage et redessinent cette toile entière à chaque image (1/60sec). La meilleure façon de savoir est de faire, alors ouvrez un IDE et commencez à écrire du code et vous aurez bientôt une réponse à votre question. BTW suivi redessiner les zones est une impasse. – Blindman67
Pourquoi pensez-vous que le suivi des zones de redessiner est une impasse? Je pensais que cela devrait réduire la charge –
Son tout à propos de PPS (pixels par seconde) GPU est rapide, javascript pas. Pour voir ce que je veux dire, créer une toile et obtenir le contexte, puis exécutez 'const test = s => { var n = performance.now(); pour (var i = 0; i <10000; i ++) { ctx.clearRect (0,0, s, s); } console.log (((performance.now() - n)/(s * s)));} test (10); test (300); 'le deuxième appel efface les pixels ~ 10 000 fois plus rapidement. – Blindman67