html холст тень применяется ко всему - PullRequest
13 голосов
/ 10 января 2011

Если вы определяете тень ОДИН РАЗ, то она применяется ко всей «графике» на холсте с этого момента (что и должно быть).

Пример: http://flanvas.com/development/flanvas/test.html

Кто-нибудь знает лучшую практику, чтобы отключить тень после того, как вы ее использовали?Я устанавливаю shadowColor в «rgba (0,0,0,0)», который является альфа-черным.Я уверен, что есть лучший способ.

пример: текст также получает тень.Сейчас я использую черный без альфа, чтобы бороться с этим.http://flanvas.com/development/flanvas/examples/filters-dropShadowFilter.html

Ответы [ 3 ]

27 голосов
/ 11 января 2011

Используя save, translate и restore, вы можете выполнять свои задачи, не беспокоясь об изменениях стиля, например,

ctx.save();
ctx.translate(X,Y);

ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';

// do some stuff

ctx.restore();

здесь X & Yкоординаты, где вы намеревались рисовать, и вы делаете свои вещи относительно координат 0,0.

Этот метод решает проблему кэширования и восстановления предыдущих стилей / значений, а также очень полезен, когда выработать с градиентами, так как они всегда строятся относительно начала координат (0,0)

8 голосов
/ 12 декабря 2012

(РЕДАКТИРОВАТЬ: Ой! Я вижу, это то, что вы уже делали с 0 альфа-черный.)

Это то, что вы искали:

context.shadowColor = "transparent";
5 голосов
/ 10 января 2011

Обычно хорошей идеей является сохранение старого значения этих «глобальных» атрибутов перед его изменением и использование этого сохраненного значения для его последующего восстановления. Пример:

var origShadowColor = ctx.shadowColor;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';

// ... do some stuff

ctx.shadowColor = origShadowColor;
...