您可以在HTML Canvas中有多个裁剪区域吗？

我有代码将一堆图像加载到隐藏的img元素中，然后将每个图像放置在画布上的Javascript循环。但是，我想剪切每个图像，以便放置在画布上时它是一个圆形。您可以在HTML Canvas中有多个裁剪区域吗？

我的循环如下所示：

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

然后我所有的图像绘制。

有没有办法让每个图像单独剪切？

我试图重置剪辑区域为图像之间的整个画布，但没有奏效。

来源

2010-03-31 emh

你应该尽量保存当前上下文状态，然后将其还原：通过添加源线是

 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方法，您还需要设置图像参数作为图像类已经在您的avatar.src参数。

您应该检查参考文件Canvas State

来源

2010-03-31 11:19:30 Myra

保存/恢复 - 这是它！非常感谢。不知道你的建议是不同的绘制图像。 te drawimage的代码工作正常，我现在拥有它的方式，使用您提供的代码的好处是什么？ – emh 2010-03-31 16:15:15

这很简单，您不需要将所有图像文件添加到页面中。将源代码显示到Image（）类中就足够了。删除这些代码的好处可以让您的页面不会在页面加载时加载这些图像。它是页面加载（性能问题）时间我们正在谈论:) – Myra 2010-03-31 17:42:35

图像不适合我剪裁.. – CarbonDry 2014-12-07 15:08:24

您可以在HTML Canvas中有多个裁剪区域吗？

回答

相关问题