canvas多重阴影发光效果实现

媒介

在一个项目中，客户提了一个发光的效果，效果图如下：
 

阴影

有的人大概会说，这个用阴影实在就可以实现。但是从图中可以看出，是一个比较猛烈的发光效果。实际的应用过程中我们会发现用简朴阴影参数实现的效果很难到达这样猛烈的发光效果。
比如

简朴的阴影效果下，shadowBlur 表现阴影半径。当阴影半径比较大的时间，阴影的扩散程度会比较大，但阴影的猛烈度不敷。在阴影的半径比较小的时间，阴影的猛烈度是够的，但阴影的扩散程度会比较小。

多重阴影

怎样到达具有较强的阴影强度，又有较好的阴影扩散度呢？也就是实现这种比较猛烈的发光效果。嗯，答案就是利用多重阴影效果。

所谓多重阴影效果，利用阴影效果对图形举行多次绘制，多次绘制的过程中，shadowBlur的值会不一样，这样可以形成多个阴影叠加的效果。

下面是一个简朴的示例，代码如下。

从代码中我们可以看出我们多次利用了阴影的绘制啊，终极的绘制效果如下图所示。

从图中可以看出, 阴影有较好的扩散程度，也有较好的猛烈度。

下面是用多重阴影实现的文字霓虹灯效果，同样可以看出有较好的发光效果。

总结

可以看出要到达猛烈的发光效果, 需要利用多重阴影功能。固然利用多种阴影也不是没有限定的, 由于阴影自己有很大的性能损耗。通过实行我们发现一般3~5次之间就可以大概到达较好的效果吧。

到此这篇关于canvas多重阴影发光效果实现的文章就先容到这了,更多相干canvas多重阴影发光内容请搜索脚本之家从前的文章或继续浏览下面的相干文章，盼望大家以后多多支持脚本之家！