HTML Canvas'da birden fazla kırpma bölgesi olabilir mi?

Question

Gizli img öğelerine bir grup görüntü yükleyen bir kodum ve her görüntüyü tuval üzerine yerleştiren bir Javascript döngüsü var. Ancak, her görüntüyü tuval üzerine yerleştirildiğinde bir daire olacak şekilde kırpmak istiyorum.

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

Sorun, sadece ilk görüntü çizilir (veya görünür):

Benim döngü şöyle görünür.

ben kırpma mantığı kaldırırsanız:

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

Sonra bütün görüntüleri çizilir.

Her görüntüyü ayrı ayrı kırpmanın bir yolu var mı?

Kırpma alanını resimler arasında tüm tuval olacak şekilde sıfırlamayı denedim ancak çalışmadı.

Answer 1

Sen geri sonra güncel bağlam durumunu kaydetmek ve denemelisiniz:

Eğer drawImage yöntemini çağırdığınızda Bence

 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 

     }); 

, ayrıca bir Resim sınıf olarak görüntü parametresini ayarlamak gerekir olan bir kaynak satır ekleyerek avatar.src parametresinde zaten.

geri yükleyebilir/kaydetme Canvas State