javascript - HTML Canvas 中可以有多个剪辑区域吗？

Question

我有代码将一堆图像加载到隐藏的 img 元素中，然后使用 Javascript 循环将每个图像放置到 Canvas 上。但是，我想裁剪每张图片，使其放在 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);
    });

然后我所有的图像都被绘制了。

有没有办法让每张图片单独裁剪？

我尝试将剪辑区域重置为图像之间的整个 Canvas ，但这没有用。

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 方法时，你还需要通过添加一个已经在你的 avatar.src 参数 中的源代码行来将图像参数设置为一个 Image 类。

您应该检查 Canvas State 的引用文档