Руководства›Текст за стеклом

Текст за стеклом

Стекло умеет изгибать текст и любой другой HTML за собой. Укажите ему элемент, и оно сделает снимок этого элемента и будет держать его свежим.

Как пользоваться

<div id="page">
  <h1>Text behind the glass</h1>
</div>

<edinstvo-glass source="#page"></edinstvo-glass>

Как это работает

Страница не может читать свои пиксели, смотрите Как работает стекло. Поэтому стекло копирует элемент со стилями и шрифтами в SVG, рисует это на canvas и использует как фон. Когда элемент меняется, оно делает новый снимок.

Что важно знать

Снимок занимает время, поэтому это для контента, который меняется иногда, а не каждый кадр. Шрифтам и картинкам с других доменов нужен CORS. Это работает в Chrome, Safari 27 и Firefox. Если браузер откажется читать снимок, элемент перейдёт на CSS.

Рисуйте на canvas

Canvas это самый быстрый и надёжный источник. Он подходит для текста, который движется или анимируется.

await document.fonts.load("700 120px Inter");

const context = canvas.getContext("2d");
context.font = "700 120px Inter";
context.fillStyle = "#e54d33";
context.fillText("glass", 40, 160);

glass.invalidate();