html画布阴影被应用于一切

Question

如果你定义了一个阴影ONCE,那么它将在它之后从画布上的所有"图形"中应用(这是它应该做的).

示例:http: //flanvas.com/development/flanvas/test.html

有没有人知道你使用它后关闭阴影的最佳做法？我将shadowColor设置为"rgba(0,0,0,0)",这是一个无alpha黑色.我相信有更好的方法.

案例样本:文本也变成了阴影.我现在正在使用无alpha黑色来对抗它. http://flanvas.com/development/flanvas/examples/filters-dropShadowFilter.html

Answer 1

通过使用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)

Answer 2

(编辑:哎呀!我看到你正在使用0 alpha黑色做的事.)

这就是你要找的东西:

context.shadowColor = "transparent";

Answer 3

在更改它之前存储这些"全局"属性的旧值通常是个好主意,并使用此存储的值稍后恢复它.例:

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

// ... do some stuff

ctx.shadowColor = origShadowColor;