Question

html5画布的上下文具有以下与设置阴影相关的属性：

shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color

其中没有一个设置阴影的宽度。是否可以使用画布设置宽度？

shadowBlur似乎确实增加了宽度，但模糊变得更加不透明。

Answer 1

shadowBlur 的值越大增加阴影的宽度，但遗憾的是它也会降低强度，因此非常高的值会产生几乎看不见的模糊。

增加阴影强度的唯一方法是多次绘制对象。然而，当对象本身是透明的并且也可以是性能钩子时，这会导致不期望的结果，因为必须在每次通过时重新计算已经非常昂贵的模糊效果。通过将具有模糊效果的对象绘制到单独的不可见画布，然后将此画布多次绘制到真实画布，可以降低性能成本。不幸的是，这仍然是一个肮脏的黑客。

当您想要创建真正精美的图形效果时，您应该考虑使用WebGL。学习曲线非常陡峭，但是当你掌握它的时候，你可以随意使用OpenGL着色语言的全部功能（好吧，不是完整的功能 - 仅版本1.00 - 但那是已经足够用于直接在用户GPU上计算出很多漂亮的图形效果。）

Answer 2

试试这个：

将对象绘制到画布上增加线宽，将对象重绘为下面的其他画布，在下面的画布上设置CSS3模糊效果。

当我画路时，为我工作。