HTML-холст размытие движения с прозрачным фоном

Question

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

ctx.fillStyle = "rgba(255,255,255,0.2)";
ctx.fillRect(0,0,canvas.width,canvas.height);

Теперь я хочу сделать то же самое, но с прозрачным фоном. Есть ли способ сделать что-то подобное? Я играю с globalAlpha, но это, вероятно, неправильный путь.

PS: Google действительно не любит меня сегодня

Answer 1

Вот более удобный способ сделать это, он требует невидимого буфера и видимого холста.

buffer.save();
buffer.globalCompositeOperation = 'copy';
buffer.globalAlpha = 0.2;
buffer.drawImage(screen.canvas, 0, 0, screen.canvas.width, screen.canvas.height);
buffer.restore();

По сути, вы рисуете ваши объекты в буфер, который очень быстро становится невидимым, а затем рисуете их на экране.Затем вы заменяете очистку буфера копированием последнего кадра в буфер, используя глобальную альфу, и globalCompositeOperation 'copy', чтобы превратить буфер в полупрозрачную версию предыдущего кадра.

Answer 2

Вы можете создать такой эффект, используя globalAlpha и два разных объекта холста: один для переднего плана и один для фона.Например, со следующими элементами холста:

<canvas id="bg" width="256" height="256"></canvas>
<canvas id="fg" width="256" height="256"></canvas>

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

bg.globalAlpha = 0.1;
bg.fillStyle = bgPattern;
bg.fillRect(0, 0, bgCanvas.width, bgCanvas.height);

bg.globalAlpha = 0.3;
bg.drawImage(fgCanvas, 0, 0);

Вот это jsFiddle пример этого.

OP спросил, как это сделать с фоном HTML.Поскольку вы не можете сохранить копию фона, вы должны удерживать копии предыдущих кадров и рисовать их все в разных альфа-версиях каждого кадра.Ностальгия: старая видеокарта 3dfx Voodoo 5 имела аппаратную функцию, называемую «t-buffer», которая в основном позволяет использовать эту технику с аппаратным ускорением.

Вот Пример jsFiddle этого стиля.Однако это далеко не так эффективно, как в предыдущем методе.

Answer 3

Если вы отслеживаете сущности на экране, вы можете сделать это, порождая новые сущности при перемещении мыши, а затем устанавливая их альфа-уровень в анимации движения до нуля. Как только они достигнут нулевой альфы, удалите сущность из памяти.

Это требует многократного рисования и замедлит рендеринг, если вы слишком сильно его повернете. Очевидно, что подход с двумя холстами является самым простым и дешевым с точки зрения производительности рендеринга, но он не позволяет вам управлять другими функциями, такими как беспорядочное движение "частиц" или применять к ним физику!

Answer 4

В этом примере вы частично очищаете экран полупрозрачным цветом, но при этом вы всегда будете «добавлять» в альфа-канал значение до 1 (без прозрачности).

Чтобы это работало с прозрачным холстом (чтобы вы могли видеть, что находится ниже), вы должны вычесть альфа-значение вместо добавления, но я не знаю способа сделать это с помощью доступных инструментов, кроме запуска всех пикселей один за другим и уменьшите альфа-значение, но это будет очень, очень медленно.