Je travaille actuellement sur une application web où seuls les changements de pixels individuels sont connus, qui sont mis en œuvre comme un événement:optimisation de toile lors du changement de pixel sont connus
function pixelChanged(x, y, color)
Ceux-ci doivent être à une toile . J'ai essayé deux méthodes pour y parvenir:
- pixels dessiner directement avec fillRect
- apprendre par coeur les pixels et les mettre sur la toile avec putImageData tous les quelques microsecondes
Maintenant, ces deux méthodes semblent avoir une mauvaise performance. Le premier entraîne de nombreux redessins, le second redessine l'image entière, même si seulement une petite zone a changé.
Ma question spécifique est, s'il y a une meilleure méthode pour implémenter ceci (peut-être quelque chose comme 1., mais d'une certaine façon retardée?).
Et si non, quelle méthode de ceux-ci devrais-je préférer? Comment puis-je l'optimiser dans ce cas?
Merci à l'avance et meilleures salutations,
copie
Avez-vous essayé d'utiliser getImageData(), en modifiant les pixels, puis en mettantImageData() lorsque vous êtes prêt? –
dans le cas de 1. les appels à pixelchanged se produisent-ils dans le même 'cycle d'appel', ou y a-t-il un délai entre eux (settimout, userinput, etc.)? Vous pourriez essayer le double tampon. Dessiner sur un canevas hors écran et copier la totalité du canevas sur le canevas visible toutes les quelques secondes. Je ne sais pas si cela va améliorer votre méthode n ° 2. – Gerben
@JamesClark Non, je ne l'ai pas fait. C'est vraiment une belle amélioration. :-) – copy