canvas 发光,

前言

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

阴影

　　有人可能会说这其实可以用阴影来实现。但从图中可以看出，是比较强的发光效果。在实际应用过程中，我们会发现单纯的阴影参数很难达到如此强烈的发光效果。

　　例如

　　ctx.shadowColor=rgba(255，0，0，1)；ctx.shadowBlur=10ctx.shadowOffsetX=10ctx.shadowOffsetY=10ctx.fillStyle=rgba(0，0，255，1.0)；ctx.fillRect(100，100，200，100)；

　　在简单阴影效果下，shadowBlur表示阴影半径。当阴影半径较大时，阴影扩散的程度会较大，但阴影的强度不够。当阴影的半径比较小时，阴影的强度是足够的，但是阴影的扩散程度会比较小。

多重阴影

　　如何实现阴影强度强，阴影扩散好？也就是为了达到这种比较强的发光效果。嗯，答案是使用多重阴影效果。

　　所谓多阴影效果，就是利用阴影效果多次绘制图形。在多次绘制的过程中，shadowBlur的值会有所不同，可以形成多个阴影重叠的效果。

　　下面是一个简单的例子，代码如下。

　　ctx.shadowColor=rgba(255，255，0，1)；ctx.shadowBlur=20ctx.shadowOffsetX=10100ctx.shadowOffsetY=10100CTX . begin path()；ctx.fillStyle=rgba(0，0，255，1.0)；ctx.arc(-10000，-10000，50，0，数学。PI * 2)；CTX . fill()；ctx.shadowColor=rgba(255，0，0，1)；ctx.shadowBlur=20ctx.shadowOffsetX=10100ctx.shadowOffsetY=10100CTX . begin path()；ctx.fillStyle=rgba(0，0，255，1.0)；ctx.arc(-10000，-10000，30，0，数学。PI * 2)；CTX . fill()；从代码中我们可以看到我们多次使用阴影绘制，最终的绘制效果如下图所示。

　　从图中可以看出，阴影的扩散度很好，强度也很好。

　　下面是多重阴影实现的文字霓虹效果，也可以看出它有很好的发光效果。

总结

　　可以看出，要达到很强的发光效果，需要多阴影功能。当然，多重阴影的使用并不是无限制的，因为阴影本身就有很大的性能损失。通过尝试，我们发现通常需要3~5次才能达到良好的效果。

　　这就是这篇关于画布多阴影发光效果实现的文章。更多相关画布多阴影夜光内容，请搜索往期文章或继续浏览下方相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。