Добавьте текстовую тень на холст, на котором также есть изображение - PullRequest
Новая
       34

Добавьте текстовую тень на холст, на котором также есть изображение

1 голос
/ 16 февраля 2012

Я использую canvas и HTML5.У меня есть значок на холсте и текст, и когда я пытаюсь добавить тень в текст с помощью этого кода: 

    ctx.shadowColor = textShadowColor;
    ctx.shadowBlur = 1;
    ctx.shadowOffsetX = 1;
    ctx.shadowOffsetY = 1;

, тень также распространяется на мое изображение.В чем может быть проблема.Как я вижу, этот shadowColor идет на холсте, а не на тексте.Должны ли быть разные холсты для текста и изображения?

Заранее спасибо

1 Ответ

2 голосов
/ 16 февраля 2012

Вы рисуете текст или изображение первым?

Если вы рисуете изображение первым, проблем не должно быть:

http://jsfiddle.net/NAanu/

Если вы рисуете текст первым, вам нужно очистить тень, чтобы картинка не прорисовывалась вместе с ней. Вот пример рисования текста сначала с тенью:

http://jsfiddle.net/NAanu/1/

Я использую функцию сохранения и восстановления, чтобы сохранить и очистить состояние тени из контекста. Вместо этого вы можете просто установить для них все значения по умолчанию.

Когда вы устанавливаете свойства для контекста, вы должны думать об этом как о загрузке кисти с краской.

Установка любого свойства контекста, например, shadowColor для красного цвета, похожа на загрузку красной краски на край вашей кисти. Все, что вы рисуете, будет иметь красный цвет.

Единственный способ остановить это - очистить вашу кисть (установить цвет и shadowOffset обратно на их значения по умолчанию) или использовать save() и restore(), что говорит «помните, что моя кисть когда-то была чистой, поэтому позже Я могу вспомнить эту чистую кисть, чтобы использовать снова ".

...