Comment optimiser le dessin de canvas JS?

Question

Mon impl de fillRect beaucoup (> 3 fois) plus lent que context2d.fillRect. Comment puis-je optimiser mon code ou pourquoi builtin fillRect plus rapide (une certaine accélération de l'application?)?

Mes impl:

__fillRect : function (data, x, y)//, r, g, b) 
    { 
    var w = this.__width * 4; 
    var idx = x * 4+ y * w; 
    var idx_1 = idx + 4; 
    var idx_2 = idx + 8; 
    var idx_3 = idx + w; 
    var idx_4 = idx_3 + 4; 
    var idx_5 = idx_3 + 8; 
    var idx_6 = idx_3 + w; 
    var idx_7 = idx_6 + 4; 
    var idx_8 = idx_6 + 8; 

    function __setPixelIdx (idx) 
    { 
     data[idx + 0] = 200; 
     data[idx + 1] = 0; 
     data[idx + 2] = 0; 
     data[idx + 3] = 255; 
    } 

    __setPixelIdx (idx); 
    __setPixelIdx (idx_1); 
    __setPixelIdx (idx_2); 
    __setPixelIdx (idx_3); 
    __setPixelIdx (idx_4); 
    __setPixelIdx (idx_5); 
    __setPixelIdx (idx_6); 
    __setPixelIdx (idx_7); 
    __setPixelIdx (idx_8); 

    }, 

Answer 1

Votre mise en œuvre est plus lente pour quelques raisons:

• Vous écrivez à un tableau, puis de copier et de conversion qui dans la toile framebuffer.
• context2d.fillRect exécute du code natif, non interprété ou du JavaScript compilé JIT.
• context2d peuvent potentiellement utiliser le matériel graphique pour dessiner
• Vous écrivez les octets à la fois alors que même une bibliothèque native non accélérée pourrait écrire toute les valeurs pixel int32

Mon conseil est d'utiliser la méthode fillRect native à moins que vous avoir une très bonne raison pas trop (par exemple faire votre propre ombrage ou masquage). Vous n'irez pas loin de la vitesse de la fonction de la bibliothèque.

L'appel __setPixelIdx au lieu de faire le data l'accès dans la fonction __fillRect principale n'aide probablement pas beaucoup. Pourquoi avez-vous écrit une fonction qui existe dans le code natif?

Answer 2

Pourquoi? Il est évident que vous ne pouvez pas rivaliser avec lui en termes de vitesse.