Как создать эффект стекла на Canvas?

@millie 

Создание эффекта стекла на Canvas может быть достигнуто путем использования прозрачности и блюра. Вот пример кода, который может создавать этот эффект:

1. Нарисуйте на холсте прямоугольник, который будет представлять ваше стекло.

1
2
3
4
5

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fillRect(50, 50, 200, 200);

1. Примените блюр для создания размытости на границах стекла.

1

ctx.filter = 'blur(5px)';

1. Нарисуйте еще один прямоугольник поверх первого чтобы создать эффект отражения.

1
2

ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fillRect(50, 250, 200, -30);

1. Сбросьте настройки фильтра для последующего рисования других элементов на холсте.

1

ctx.filter = 'none';

Полный код примера может выглядеть так:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fillRect(50, 50, 200, 200);

ctx.filter = 'blur(5px)';

ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fillRect(50, 250, 200, -30);

ctx.filter = 'none';

Этот код создаст на холсте прямоугольник со свойствами, напоминающими прозрачное стекло. Такой код можно изменять и добавлять дополнительные настройки по своему усмотрению.