您可以在HTML画布中有多个剪裁区域吗？ [英] Can you have multiple clipping regions in an HTML Canvas?

问题描述

我有一个代码，将一堆图像加载到隐藏的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 .random（）* canvas.height）; 
 
 context.beginPath（）; 
 context.arc（x + 24，y + 24,20,0，Math.PI * 1）; 
 context.clip（）; 
 
 context.strokeStyle =black; 
 
 context.drawImage（document.getElementById（avatar.id） x，y）; 
 
 context.stroke（）; 
}）;问题是，只有第一个图像被绘制（或是可见的）。
 
 $ b 
 
  
 $ b 
如果我删除剪辑逻辑：
  $$（'＃avatars img'）。 each（function（avatar）{
 var canvas = $（'canvas'）; 
 var context = canvas.getContext（'2d'）; 
 
 var x = floor（Math.random（）* canvas.width）; 
 var y = Math.floor（Math.random（）* canvas.height）; 
 
 context.drawImage（document.getElementById （avatar.id），x，y）; 
}）; 
  
然后绘制我的所有图片。
 
 
 
 
 
 
 
我尝试重置裁剪区域，成为图片之间的整个画布，但是没有工作。
解决方案
您应该尝试保存当前上下文状态，然后将其还原：
  canvas = document.getElementById（area）; 
 context = canvas.getContext（'2d'）; 
 
 $（＃avatars img）每个（function（avatar）{
 
 var x = Math.floor（Math.random（）* canvas.width）; 
 var y = Math.floor（Math.random（）* canvas.height）; 
 
 context.save（）; //将当前状态推入画布
 context.beginPath （）; 
 context.arc（x + 24，y + 24，20，0，Math.PI * 2，1）; 
 context.clip（）; 
 
 context.strokeStyle =black; 
 
 //这样绘制图像
 var img = new Image（）; 
 img.src = avatar.src; 
 img.onload = function（）{
 context.drawImage（img，x，y）; 
}; 
 
 context.stroke（）; 
 context.restore （）; //将上下文恢复为状态
 
}）; 
  
我认为当你调用drawImage方法时，你还需要将Image参数设置为Image类， 
 
 
 
您应该检查参考文档中 /www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-staterel =nofollow noreferrer>画布状态 
 
I have code that loads a bunch of images into hidden img elements and then a Javascript loop which places each image onto the canvas. However, I want to clip each image so that it is a circle when placed on the canvas.

My loop looks like this:
    $$('#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 is, only the first image is drawn (or is visible).

If I remove the clipping logic:
    $$('#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);
    });
Then all my images are drawn.

Is there a way to get each image individually clipped?

I tried resetting the clipping area to be the entire canvas between images but that didn't work.
解决方案
You should try to save current context state and then restore it:
        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

        });
I think when you call drawImage method,you also need to set image parameter as an Image class by adding a source line which is already in your avatar.src parameter.

You should check the reference document for Canvas State

                        
这篇关于您可以在HTML画布中有多个剪裁区域吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！