1

Доброго всем времени суток.

Коротко: как сделать фоновое изображение у текста?

Длинно: представьте себе, вы скотчем выложите на стекле окна (окно в доме) буквы АБВ, а потом покрасите стекло, не раму, а стекло, и потом снимите скотч. Получится АБВ, и у этих букв фон, фон - это пейзаж за окном. Вот охота сделать на странице в белом заголовке определенное слово (которое может буду менять), и охота вместо цвета букв сделать всему слову (или отдельно каждой букве) фон... ну или текстуру. Как так сделать?

Это возможно? Кто-нибудь такое делал?

p.s. В идеале охота, что-то связанное с JS, причем не отдельным файлом, а "все внутри" страницы.

2 ответа 2

4
<p id="text" style="font-size:30px;font-family:Arial">text 8 ЛВЛ text text</p>

<script type="text/javascript">
var el = document.getElementById('text');
var cvs = document.createElement('canvas');
cvs.width = el.clientWidth;
cvs.height = el.clientHeight;
var ctx = cvs.getContext('2d');

var img = new Image();
img.onload = function(){
    ctx.beginPath();
    ctx.font = el.style.fontSize + ' ' + el.style.fontFamily;
    var ptn = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = ptn;
    ctx.fillText(el.innerHTML, 0, cvs.height);
    el.innerHTML = '';
    el.appendChild(cvs);
}
img.src = 'step9addlight.jpg';

</script>

Это грубый набросок. Надеюсь, основная мысль ясна. =)

1
  • интересная штуковина
    – sergey
    21 сен 2011 в 13:05
1

Нормальный:

  1. файл - пнгшка с прозрачными буквами(алфавит), но непрозрачным фоном. Минус - постоянный размер шрифта. При изменении размера шрифта надо менять файл. Полуизвратский:
  2. SVG+VRML - создаем векторные изображения шрифта. Можно конвертером. Минус - в старых браузерах ничего видно не будет. Извратский:
  3. Дивами же! =) Попиксельно. А ниче смешного: артлебедев так круглую "лупу" собрал. Ниче, не жалуется. Минус: ИЕ6 загнется от такого числа элементов. Флэшовый:
  4. Flash/Silverlight. Второй - предпочтительнее. Минусы: че-то еще качать надо. Много весит сама штука.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.