HTML5 canvas创建外部发光效果的形状 [英] HTML5 canvas create outer glow effect of shape

问题描述

我想为我的画布标记中的圆弧形状创建外部发光效果。
这是它应该是什么样子：

I want to create an outer glow effect for arc shapes in my canvas tag. This is what it's supposed to look like:

到目前为止，我的圈子都是白色的。我尝试使用一个偏移为0的dropShadow，但这看起来不正确。

So far I have the circles in white. I tried using a dropShadow that has an Offset of '0', but this doesn't look right.

你建议什么？也许下面的形状有从蓝色到黑色的渐变？
提前感谢！

What do you suggest? Maybe shapes underneath that have a gradient from blue to black? Thanks in advance!

编辑：终于得到它的工作。使用for循环绘制不同半径和alpha的圆。

Finally got it working. Used a for loop to draw circles with different radius and alpha.

推荐答案

是圆形图像文件吗？如果是这样，请创建图像文件，并在Photoshop，GIMP等应用它们。将它们保存为.PNG以保持背景的透明度。

Are the circles image files? If so, create image files with glow applied to them within photoshop, GIMP, etc. Save them as .PNG to preserve the transparency of the background.

如果使用画布绘图功能在屏幕上绘制，那么如何重绘圆圈25次，每个圆圈的宽度会变宽一个像素？

If they are drawn on the screen with canvas drawing functions, then how about redrawing the circle 25 times, each circle getting one pixel thicker in width?

这篇关于HTML5 canvas创建外部发光效果的形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！