html5 画布的上下文具有以下与设置阴影相关的属性:
shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color
其中没有设置阴影的宽度。是否可以使用画布设置宽度?
shadowBlur 似乎确实增加了宽度,但模糊变得更加不透明。
html5 画布的上下文具有以下与设置阴影相关的属性:
shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color
其中没有设置阴影的宽度。是否可以使用画布设置宽度?
shadowBlur 似乎确实增加了宽度,但模糊变得更加不透明。
较高的 shadowBlur 值确实会增加阴影的宽度,但不幸的是它也会降低强度,因此非常高的值会产生几乎不可见的模糊。
增加阴影强度的唯一方法是多次绘制对象。然而,当对象本身是 alpha 透明时,这可能会导致不希望的结果,并且也可能是一个性能挂钩,因为已经非常昂贵的模糊效果必须在每次通过时重新计算。通过将具有模糊效果的对象绘制到单独的、不可见的画布上,然后将该画布多次绘制到真实画布上,可以稍微降低性能成本。不幸的是,这仍然是一个肮脏的黑客。
当您想要创建真正精美的图形效果时,您应该考虑使用 WebGL。学习曲线非常陡峭,但是当您掌握了窍门时,您就可以使用 OpenGL 着色语言的全部功能(好吧,不是全部功能 - 只有 1.00 版 - 但这已经足够了直接在用户 GPU 上计算的图形效果)。
尝试这个:
将对象绘制到画布上,增加线宽,将对象重新绘制到下面的不同画布上,在下面的画布上设置 CSS3 模糊效果。
当我用路径绘图时为我工作。