Question sur l'objet javascript-canvas (save, transform, restore)

Question

J'ai beaucoup joué avec la toile dernièrement. Maintenant, j'essaie de construire une petite bibliothèque d'interface utilisateur, here is a demo to a simple list (Remarque: utilisez vos touches fléchées, Chrome/Firefox uniquement) Comme vous pouvez le constater, la performance est plutôt mauvaise - parce que je supprime et redessine chaque élément sur chaque image :

this.drawItems = function(){ 
    this.clear(); 
    if(this.current_scroll_pos != this.scroll_pos){ 
     setTimeout(function(me) { me.anim(); }, 20, this); 
    } 
    for (var i in this.list_items){ 
     var pos = this.current_scroll_pos + i*35; 
     if(pos > -35 && pos < this.height){ 
      if(i == this.selected){ 
       this.ctx.fillStyle = '#000'; 
       this.ctx.fillText (this.list_items[i].title, 5, pos); 
       this.ctx.fillStyle = '#999'; 
      } else { 
       this.ctx.fillText (this.list_items[i].title, 5, pos); 
      } 
     } 
    } 
} 

Je sais qu'il doit y avoir de meilleures façons de faire, comme par save() et transform() mais je ne peux pas envelopper la tête autour de l'idée - je ne peux sauver toute la toile, transformer un peu et restaurer toute la toile. Les informations et les exemples concrets sur ce sujet spécifique sont également assez rares, peut-être que quelqu'un ici peut me pousser dans la bonne direction.

Answer 1

Une chose que vous pouvez essayer d'accélérer le dessin est:

• Créer un autre élément de toile (c2)
• Render votre texte à c2
• Tirage au sort c2 dans la toile initiale avec la vous transformez voulez , en utilisant simplement drawImage

drawImage prend une toile ainsi que des éléments d'image.

Answer 2

Ok, je pense que je l'ai compris. Le canevas HTML5 utilise une technique appelée "mode immédiat" pour le dessin, ce qui signifie que l'écran est censé être constamment redessiné. Ce qui semble bizarre (et lent) en premier est en fait un gros avantage pour des choses comme l'accélération GPU, aussi c'est une technique assez courante trouvée dans opengl ou sdl. Un peu plus d'informations ici: http://www.8bitrocket.com/2010/5/15/HTML-5-Canvas-Creating-Gaudy-Text-Animations-Just-Like-Flash-sort-of/

Donc le redessin de chaque étiquette dans chaque image est totalement OK, je suppose.