Можете ли вы иметь несколько областей отсечения в HTML-холсте?

Question

У меня есть код, который загружает кучу изображений в скрытые элементы img, а затем цикл Javascript, который помещает каждое изображение на холст. Тем не менее, я хочу обрезать каждое изображение так, чтобы оно было кругом, когда оно было помещено на холст.

Мой цикл выглядит следующим образом:

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

Проблема, только рисуется первый образ (или виден).

Если удалить логику подрезки:

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

Тогда все мои изображения нарисованы.

Есть ли способ получить каждое изображение индивидуально обрезанным?

Я попытался сбросить область отсечения, чтобы быть всем холстом между изображениями, но это не сработало.

Answer 1

Вы должны попытаться сохранить текущее состояние контекста, а затем восстановить его:

 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 

     }); 

Я думаю, когда вы вызываете метод DrawImage, вам также необходимо установить параметр изображения как класс Image, добавив строку исходного текста, который уже в вашем аватаре.src параметр.

Вы должны проверить ссылочный документ Canvas State