Bạn có thể có nhiều vùng cắt trong Canvas HTML không?

Question

Tôi có mã tải một loạt các hình ảnh vào các phần tử img ẩn và sau đó là một vòng lặp Javascript đặt mỗi hình ảnh lên khung hình. Tuy nhiên, tôi muốn cắt từng hình ảnh sao cho nó là hình tròn khi được đặt trên canvas.

vòng lặp của tôi trông như thế này:

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

Vấn đề là, chỉ những hình ảnh đầu tiên được rút ra (hoặc có thể nhìn thấy).

Nếu tôi loại bỏ logic clipping:

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

Sau đó, tất cả hình ảnh của tôi được rút ra.

Có cách nào để có được từng hình ảnh riêng lẻ không?

Tôi đã thử đặt lại khu vực cắt thành toàn bộ canvas giữa các hình ảnh nhưng không hoạt động.

Answer 1

Bạn nên cố gắng tiết kiệm nhà nước bối cảnh hiện nay và sau đó khôi phục lại nó:

 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 

     }); 

Tôi nghĩ rằng khi bạn gọi phương thức drawImage, bạn cũng cần phải thiết lập thông số hình ảnh như một lớp hình ảnh bằng cách thêm một dòng nguồn đó là đã có trong thông số avatar.src của bạn.

Bạn nên kiểm tra tài liệu tham chiếu cho Canvas State