Können Sie mehrere Ausschnittbereiche in einem HTML-Canvas haben?

Question

Ich habe Code, der eine Reihe von Bildern in versteckte Img-Elemente lädt und dann eine Javascript-Schleife, die jedes Bild auf der Leinwand platziert. Ich möchte jedoch jedes Bild so beschneiden, dass es ein Kreis ist, wenn es auf der Leinwand platziert wird.

Meine Schleife sieht wie folgt aus:

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

Problem ist nur das erste Bild gezeichnet (oder ist sichtbar).

Wenn ich den Ausschnitt Logik entfernen:

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

Dann werden alle meine Bilder gezeichnet werden.

Gibt es eine Möglichkeit, jedes Bild individuell zu beschneiden?

Ich habe versucht, die Clipping-Bereich auf die gesamte Leinwand zwischen den Bildern zurückgesetzt, aber das hat nicht funktioniert.

Answer 1

Sie sollten versuchen aktuellen Kontext Zustand zu speichern und sie dann wieder her:

 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 

     }); 

Ich denke, wenn Sie drawImage Methode aufrufen, müssen Sie auch Bildparameter als Image-Klasse festgelegt durch eine Source-Leitung hinzugefügt, die ist bereits in Ihrem avatar.src Parameter.

Sie sollten das Referenzdokument für Canvas State