
На одном из сайтов потребовалось сделать прозрачный текст внутри блока с заливкой. Задача оказалась довольно нетривиальной и реальных примеров в сети не так много, поэтому изложу это в статье.
Итак.
Поразмыслив, я пришел к выводу, что подобного эффекта можно добиться четырьмя способами:
Вариант с изображением отпал сразу, так как текст должен быть легко редактируемым.
Вариант с background-clip довольно простой и интересный, но после более детального рассмотрения выяснилось, что связать текст с фоном подложки будет проблематично.
Вариант с SVG маской оказался достаточно простым, в сети нашелся пример реализации и после небольшой адаптации я пришел к результату, который в целом устраивал.
Но было это громоздко и не гибко. Текст писался дважды, ограничение в одной строке, путаница в логике. Поэтому стоило попробовать и последний вариант, такая мелочь для canvas не должна составить проблем.
Конечно, дабы не изобретать велосипед, поискал в сети подобную реализацию.
Наткнулся на старенькую статью Питера Собота, где он описывал использование подобного эффекта в редизайне своего сайта, там же был и пример реализации в качестве плагина к jquery (можно обойтись и без jquery, но у меня он уже активно используется, поэтому не стал заморачиваться). Вся суть заключается в свойстве CanvasRenderingContext2D.globalCompositeOperation и его значении destination-out.
А происходит это так: рисуется прямоугольник, залитый цветом (размер и заливка соответствуют блоку с текстом), поверх него рисуется текст, благодаря вышеуказанному свойству текст вычитается из прямоугольника.
Немного доработав код (он плохо работал в мозилле), получил вполне удовлетворительный результат. Теперь можно писать текст в несколько строк и не заморачиваться с разметкой как в случае с SVG.
А вот и пример:
Комментарии ()