Как медленно заполнить текст на холсте html5

В настоящее время у меня есть текст на холсте белого цвета. Я хотел бы иметь возможность медленно и плавно заполнять текст другим цветом (красным) слева направо. Есть ли способ сделать это, чтобы иногда буква была белой на дроби и красной на другой стороне?

Пример использования слова «Цвет».

«Кол» красные. Следующая буква «о» имеет 25% красного (слева) и 75% белого (справа). Буква "r" полностью белая.

Обновить

Спасибо за помощь. Я заметил, что это работает еще лучше, если вы добавите ctx.beginPath() перед объектом клипа.

Я немного добавил к этой идее и создал небольшой js-объект, который, кажется, хорошо работает для моего текущего проекта. Это может быть не самый элегантный js, но, надеюсь, он поможет кому-то другому, кто захочет сделать это позже. Я заметил небольшую проблему с изменением размера текста, когда он начинает заполняться, не знаю почему. http://jsfiddle.net/WRAFA/4/


javascript html5-canvas
person user915134    schedule 27.08.2011    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете сделать это с исходным кодом составной операции. Если вы сначала нарисуете свой текст цветом фона (белым) с помощью составной операции source-over, а затем нарисуете поверх него цветной прямоугольник с помощью source-in, это будет единственное пересечение между текстом и прямоугольником, который будет нарисован. Я сделал небольшой пример на jsfiddle.

person Rickard    schedule 27.08.2011
comment
Это почти то, что мне нужно! Единственное, я не могу видеть текст, если я изменю фон на черный и оставлю текст белым. Есть ли способ сделать так, чтобы текст отображался, а затем заполнялся? - person user915134; 27.08.2011
comment
Я сделал небольшую настройку, и я думаю, что добился успеха. Вот отредактированная ссылка на то, что вы положили. (У меня пока нет прав на редактирование.) ссылка. - person user915134; 27.08.2011

arrow_upward
2
arrow_downward

Хорошая работа по ремонту скрипки Ричарда. Я сделал пару улучшений.

  1. вы просили черный фон холста с белым текстом.
  2. Здесь не рекомендуется использовать setInterval. Вы запускаете рисование во веки веков и всегда и всегда и всегда и.... Я исправил скрипку, чтобы использовать setTimeout, чтобы она останавливала события рисования, как только вы добираетесь до края холста.

Скорректированная скрипка находится по адресу http://jsfiddle.net/d4Jef/1/.

Однако одну вещь я бы порекомендовал. Вместо компоновки вы должны писать текст, используя область отсечения. Проблема с композицией source-in заключается в том, что если ваш текст был написан поверх какого-то изображения с непрозрачными пикселями, то заполнение прямоугольника поверх этого сдуло бы ваш фон. Здесь вам это сошло с рук, потому что на холсте не было ничего, кроме текста. Так что лучше использовать область отсечения.

Вот версия с отсечением: http://jsfiddle.net/5ZgNz/2/

Обратите внимание на использование дополнительного зеленого квадрата, чтобы подчеркнуть, что этот подход работает в целом.

person Ray Toal    schedule 27.08.2011
comment
Я использовал setInterval только для того, чтобы код был коротким, вы используете setTimeout, конечно, намного лучше. Я просто хотел показать свою идею. Использование области отсечения вместо различных составных операций, вероятно, намного лучше, все составные операции (кроме исходного наложения по умолчанию) довольно медленные. - person Rickard; 28.08.2011
comment
Я уверен, что вы сделали. :-) Я просто дал ОП некоторые дополнительные указания как хорошее дело. - person Ray Toal; 28.08.2011