Как сделать пиксельное свечение для текста?

Question

[vahantov]

Добрый день, интересует вопрос как средствами js+css организовать "пиксельное свечение" на тексте.
Допустим ввел человек произвольный текст, и туда добавляется эффект.

Comments

[Moskus]

Вот именно как здесь вы это реализовать средствами css не сможете, потому что точки расположены вдоль линий, которые построены, как буферы для контура букв. Это даже средствами canvas - нетривиальная задача, потому что надо сначала построить эти буферы, а потом вдоль них равномерно расположить точки. Иначе будет весьма уродливо.

Answer 1

[ixon]

Правильней будет реализовать это через css. Добавить тексту свойства:

text-shadow: 0px 0px 30px ЦветСвечения;
text-fill-color: transparent;
background-clip: text;
background:url(Изображение из размытых точек)

Если же делать это через js, то нужно будет получить размеры и характеристики текста через canvas, перенести его туда, в цикле перебрать попиксельно и через определённый интервал вставлять изображение из размытых точек в тех местах, где цвет ближе всего к чёрному.
Но выгодней всего будет заранее нарисовать текст в графическом редакторе и всего лишь вставить его как картинку. Если важно иметь вариативный текст, можно разбить текст на буквы и вставлять каждую заранее нарисованную букву отдельным изображением или помещать её на canvas.