Pouvez-vous avoir plusieurs régions de découpage dans un canevas HTML?

Question

J'ai un code qui charge un tas d'images dans des éléments img cachés, puis une boucle Javascript qui place chaque image sur la toile. Cependant, je veux découper chaque image de sorte qu'il s'agisse d'un cercle lorsqu'il est placé sur la toile.

Ma boucle ressemble à ceci:

$$('#avatars img').each(function(avatar) { 
     var canvas = $('canvas'); 
     var context = canvas.getContext('2d'); 

     var x = Math.floor(Math.random() * canvas.width); 
     var y = Math.floor(Math.random() * canvas.height); 

     context.beginPath(); 
     context.arc(x+24, y+24, 20, 0, Math.PI * 2, 1); 
     context.clip(); 

     context.strokeStyle = "black"; 

     context.drawImage(document.getElementById(avatar.id), x, y); 

     context.stroke(); 
    }); 

Le problème est, seule la première image est dessinée (ou est visible).

Si je supprime la logique de découpage:

$$('#avatars img').each(function(avatar) { 
     var canvas = $('canvas'); 
     var context = canvas.getContext('2d'); 

     var x = Math.floor(Math.random() * canvas.width); 
     var y = Math.floor(Math.random() * canvas.height); 

     context.drawImage(document.getElementById(avatar.id), x, y); 
    }); 

Alors toutes mes images sont tirées.

Existe-t-il un moyen d'écrêter chaque image individuellement?

J'ai essayé de réinitialiser la zone d'écrêtage pour qu'elle soit la toile entière entre les images mais cela n'a pas fonctionné.

Answer 1

Vous devriez essayer d'enregistrer l'état de contexte actuel, puis restaurer:

 canvas = document.getElementById("area"); 
     context = canvas.getContext('2d'); 

     $("#avatars img").each(function(avatar) { 

      var x = Math.floor(Math.random() * canvas.width); 
      var y = Math.floor(Math.random() * canvas.height); 

      context.save();//push current state into canvas 
      context.beginPath(); 
      context.arc(x + 24, y + 24, 20, 0, Math.PI * 2, 1); 
      context.clip(); 

      context.strokeStyle = "black"; 

      //draw image this way 
      var img = new Image(); 
      img.src = avatar.src; 
      img.onload = function() { 
       context.drawImage(img, x, y); 
      }; 

      context.stroke(); 
      context.restore();//restore context to the state 

     }); 

Je pense que lorsque vous appelez la méthode drawImage, vous devez également définir le paramètre d'image en tant que classe d'image en ajoutant une ligne de source qui est déjà dans votre paramètre avatar.src.

Vous devez vérifier le document de référence pour Canvas State