È possibile avere più aree di ritaglio in una tela HTML?

Question

Ho un codice che carica un mucchio di immagini in elementi img nascosti e quindi un loop Javascript che posiziona ogni immagine sulla tela. Tuttavia, voglio ritagliare ogni immagine in modo che sia un cerchio quando viene posizionata sulla tela.

Il mio ciclo si presenta così:

$$('#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(); 
    }); 

Il problema è che solo la prima immagine viene disegnata (o è visibile).

Se rimuovo la logica di ritaglio:

$$('#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); 
    }); 

Poi tutte le mie immagini sono tratte.

C'è un modo per ottenere ogni immagine ritagliata individualmente?

Ho provato a reimpostare l'area di ritaglio come l'intera tela tra le immagini ma non ha funzionato.

Answer 1

Si dovrebbe cercare di salvare lo stato attuale contesto e quindi ripristinarlo:

 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 

     }); 

Credo che quando si chiama il metodo drawImage, è inoltre necessario impostare il parametro immagine come una classe di immagine con l'aggiunta di una riga di codice sorgente che è già nel parametro avatar.src.

Si dovrebbe controllare il documento di riferimento per Canvas State