Dois-je utiliser plusieurs images dans un canevas?

Question

Quelle est la meilleure pratique? Dois-je créer une balise de canevas distincte pour chaque image dans html5, ou est-ce tout aussi fonctionnel de mettre plusieurs images dans une toile, et comment le ferais-je?

code Mon jusqu'à présent:

var canvas = document.getElementById("e"); 
var context = canvas.getContext("2d"); 

var cat = new Image(); 
cat.src = "images/cartoonPaul01.jpg"; 
cat.onload = function() { 
    context.drawImage(cat, 0, 0, 169, 207); 
}; 

Answer 1

Vous pouvez le faire dynamiquement, si vous êtes si enclin. muro de l'art déviant utilise quelques toiles de base - temp, buffer et background. Ensuite, vous créez et supprimez dynamiquement des calques à l'aide d'un contrôle sur le côté. Cela dépend en grande partie de ce que vous voulez faire.

Si vous imprimez simplement sur le canevas et que vous n'avez pas besoin de modifier les images d'une manière qui nécessite du dynamisme, vous pouvez les dessiner toutes sur un canevas. Si vous avez besoin de superposition, utilisez-le.

toile dynamique et la création contexte:

// This is not best practice, just an example using globals. 
var layers = []; 
var lyrCtx = []; 

createLayer = function() { 
    // Create the canvas. 
    layers.push(document.createElement('canvas')); 
    layers[layers.length - 1].setAttribute('id', 'layer'+layers.length-1); 

    // Create the context. Provided you do it in order, lyrCtx[i] should correlate to layers[i] 
    lyrCtx.push(layers[layers.length - 1].getContext("2d")); 

    // Handle context settings here. 
} 

Answer 2

Vous devriez obtenir l'équilibre. J'utilise généralement 4-6 couches de toile dans mon application, et dessine une partie logique sur eux.