javascript - 如何设置html5 Canvas shadowBlur的宽度?

标签 javascript html canvas

html5 canvas 的上下文具有以下与设置阴影相关的属性:

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

都没有设置阴影的宽度。 是否可以使用 Canvas 设置宽度?

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

最佳答案

shadowBlur 的较高值确实会增加阴影的宽度,但不幸的是它也会降低强度,因此非常高的值会产生几乎不可见的模糊。

增加阴影强度的唯一方法是多次绘制对象。然而,当对象本身是 alpha 透明时,这可能会导致不期望的结果,并且也可能成为性能 Hook ,因为已经相当昂贵的模糊效果必须在每次传递时重新计算。通过将具有模糊效果的对象绘制到单独的、不可见的 Canvas 上,然后将该 Canvas 多次绘制到真实 Canvas 上,可以稍微降低性能成本。不幸的是,这仍然是一个肮脏的黑客行为。

当您想要创建真正精美的图形效果时,您应该考虑使用 WebGL。学习曲线相当陡峭,但是当您掌握了它的窍门后,您就可以使用 OpenGL 着色语言的全部功能(好吧,不是全部功能 - 仅版本 1.00 - 但这就是对于直接在用户 GPU 上计算的许多漂亮的图形效果来说已经足够了)。

关于javascript - 如何设置html5 Canvas shadowBlur的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14164003/

相关文章:

用于图像和描述的 jQuery slider

html - CSS - 为什么 -webkit-padding 在 list-style-type : none;? 之后没有消失

javascript - 使用 jQuery,如何删除动态添加到页面头部的类

javascript - 如何使用 Vue 在 div 中加载 Canvas ?

android - 仅在垂直方向倾斜位图

javascript - 在 <canvas> 上显示 <div>

javascript - 使用 Backbone Collection 构建列表

javascript - 条形图和折线图在 dc.js 中不交互

javascript - Angular:用逗号格式化数字

javascript - D3 - y 轴未附加到图表