如何在Matplotlib中绘制带渐变/淡出/发光效果的空心圆

前端网页场景（CSS实现） #

核心用径向渐变直接指定颜色起止位置即可，不需要额外素材：

• 示例参数：内半径50px，外半径150px，渐变颜色为蓝色到全透明

.glow-ring {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  /* 径向渐变参数：透明到内半径位置，然后从内半径开始显示蓝色，到外半径位置过渡到完全透明 */
  background: radial-gradient(circle, transparent 50px, #4080ff 50px, transparent 150px);
}

• 可以通过调整色标位置、添加中间色标，自定义渐变的过渡速率和颜色变化。

图片批量生成场景（Python Pillow库实现） #

通过逐像素计算透明度的方式生成静态图片，适合批量生成固定规格的素材：

• 核心逻辑：计算每个像素到圆心的距离，内半径以内完全透明，内外半径之间的透明度随距离增加线性降低，外半径以外完全透明
• 示例代码：

from PIL import Image
import math

# 自定义参数
canvas_size = 300
inner_radius = 50
outer_radius = 150
glow_color = (64, 128, 255) # RGB颜色值

center = (canvas_size // 2, canvas_size // 2)
# 创建带透明通道的画布
img = Image.new("RGBA", (canvas_size, canvas_size), (255, 255, 255, 0))
pixels = img.load()

for x in range(canvas_size):
    for y in range(canvas_size):
        distance = math.sqrt((x - center[0])**2 + (y - center[1])**2)
        if inner_radius <= distance <= outer_radius:
            # 计算当前位置的透明度
            alpha = int(255 * (1 - (distance - inner_radius) / (outer_radius - inner_radius)))
            pixels[x, y] = glow_color + (alpha,)

img.save("glow_ring.png")

设计场景（Photoshop实现） #

有两种快速实现方式：

1. 图层样式法：绘制好对应尺寸的内圆矢量图形，直接添加外发光图层样式，调整发光大小、扩展、透明度参数，就能直接得到从内圆边界向外渐变的glow效果
2. 选区渐变法：先绘制内圆选区，右键选择「变换选区」，按住Shift+Alt等比例放大到外半径尺寸，进入快速蒙版模式，选择从黑到白的径向渐变，从圆心拉到选区边缘，退出快速蒙版后填充对应颜色即可。

内容的提问来源于stack exchange，提问作者Bartłomiej Mróz