Сделать эффект матового стекла из svg
Всем, привет, подскажите пожалуйста, как наложить svg изображение с эффектом матового стекла на элемент, т.е есть фоновая картинка внизу, а поверх я хочу наложить svg с размытием, пробовал backdrop-filter это свойство работаем по всей высоте и ширине элемента, подскажите, как можно такое реализовать, буду вам благодарен
1 элемент лежит фоном, на этот фон я хочу поставить svg и что бы был blur, можно ли добиться такого эффекта?
Ответы (1 шт):
Путь (path) хранит контур отдельного элемента, отрисованного на 300*300. Поэтому для высоты холста 200 применяется scale и translate для смещения от края перед fill(path). Перед изменением этих настроек контекст сохраняется (ctx.save()), а после восстанавливается - ctx.restore(). Потому как в дальнейшем сюда же будет отрисован результат работы на неотображаемом холсте.
Создаем невидимый холст document.createElement('canvas');. Сохраняем базовые настройки. Задаем цвет фона (имитация цвета стекла - fillRect()). Задаем фильтр для всего (blur(3px)), что будет нарисовано в дальнейшем (до восстановления настроек) и переносим изображение основного холста - фигура на нем становится размытой.
Затем настраиваем смещение по координатам и небольшое увеличение будущего куска стекла (можно и вращение добавить). Чтобы сохранить только изображение под стеклом, использую перед его отрисовкой globalCompositeOperation = 'destination-in'; - так все предыдущее на холсте сохраниться только там, где будет присутствовать непрозрачные пиксели в дальнейшем. Теперь рисуем фигуру (по умолчанию черную - непрозрачную - fill(new Path2D(path));) и размытая фигурка с основного холста и бледный фон проявляется только в месте этой новой фигуры.
Результат работы с невидимым холстом отрисовываем поверх основного: ctx.drawImage(hidden,0,0);
const path = "M118 211c-5.88,0.89 -13.66,2 -20,2 -24.3,0 -44,-19.7 -44,-44 0,-24.3 19.7,-44 44,-44 6.92,0 11.95,1.33 18,2 9,1 29,-21 30,-29 0.4,-3.21 0.21,-5.2 -0.01,-5.82 -2.92,-8.14 -6.76,-19.68 -6.76,-28.34 0,-27.61 22.38,-50 50,-50 27.61,0 50,22.39 50,50 0,27.62 -22.39,50 -50,50 -10.27,0 -17.23,-2.84 -25.23,-3.84 -13.24,-1.66 -34,25 -31,32 2.8,6.54 9,16.92 9,27 0,9.96 -4.17,17.36 -8.61,25.12 -7.39,12.88 19.85,34.98 27.41,31.96 3.45,-1.37 7.25,-2.08 11.2,-2.08 17.12,0 31,13.88 31,31 0,17.12 -13.88,31 -31,31 -17.12,0 -31,-13.88 -31,-31 0,-4.74 1.73,-9.5 2.49,-14.02 0.84,-4.92 -10.48,-32.26 -25.49,-29.98z";
const W = 600;
const H = 200;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = W;
canvas.height = H;
ctx.save();
ctx.scale(0.5,0.5);
ctx.translate(20,40);
ctx.fillStyle = '#f48c38';
ctx.fill(new Path2D(path));
ctx.restore();
const hidden = document.createElement('canvas');
hidden.width = W;
hidden.height = H;
const hctx = hidden.getContext('2d');
hctx.save();
hctx.fillStyle = '#fff6f0';
hctx.fillRect(0,0,W,H);
hctx.filter = 'blur(3px)';
hctx.drawImage(canvas, 0, 0);
hctx.restore();
hctx.scale(0.6,0.6);
hctx.translate(-40, -10);
hctx.globalCompositeOperation = 'destination-in';
hctx.fill(new Path2D(path));
ctx.drawImage(hidden,0,0);<canvas id="canvas"></canvas>