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

У меня есть код, который загружает кучу изображений в скрытые элементы 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);
    });

Затем рисуются все мои изображения.

Есть ли способ обрезать каждое изображение отдельно?

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


javascript canvas html clipping
person emh    schedule 31.03.2010    source источник

Ответы (1)


arrow_upward
10
arrow_downward

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

        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.

Вы должны проверить справочный документ для Состояние холста

person Myra    schedule 31.03.2010
comment
сохранить/восстановить - вот и все! Спасибо большое. не уверен, хотя насчет вашей рекомендации рисовать изображения по-другому. код drawimage работает нормально, как у меня сейчас, какая польза от использования предоставленного вами кода? - person emh; 31.03.2010
comment
Это просто, вам не нужно добавлять все файлы изображений на страницу. Будет достаточно показать источник в классе Image(). Преимущество их удаления позволяет вашей странице не загружать эти изображения при загрузке страницы. Это время загрузки страницы (проблема с производительностью), которое мы речь идет :) - person Myra; 31.03.2010