Python 中秋月相可视化：从算法到 Web 渲染实战

可视化渲染 (WebMoonVisualizer)

月亮绘制并非简单的圆形，需要根据相位值动态调整阴影宽度。中秋节时，我们会叠加多层光晕和星星装饰来增强节日氛围。

class WebMoonVisualizer:
    def __init__(self):
        self.calculator = MoonPhaseCalculator()

    def draw_moon(self, ax, phase, size=1.0, position=(0, 0), is_mid_autumn=False):
        """绘制月亮形状"""
        x, y = position
        # 基础圆形
        circle = patches.Circle((x, y), size, facecolor='lightyellow', edgecolor='gold', linewidth=2)
        ax.add_patch(circle)

        # 根据月相绘制阴影部分
        if phase < 0.95:
            shadow_width = size * 2 * (1 - phase)
            if shadow_width > 0.1:
                shadow = patches.Ellipse((x + size * 0.1, y), shadow_width, size * 2,
                                         facecolor='darkgray', alpha=0.6)
                ax.add_patch(shadow)

        # 中秋节特效：多层光晕 + 星星
        if is_mid_autumn:
            for i in range(4):
                halo = patches.Circle((x, y), size * (1.3 + i * 0.15),
                                      facecolor='orange', alpha=0.12 - i * 0.03, edgecolor='none')
                ax.add_patch(halo)

图表与交互实现

时间轴与曲线图

为了直观展示月相变化规律，我们生成了两种主要图表。时间轴用于连续展示，注意间距设置以避免重叠；曲线图则强调数学规律，深蓝背景配合金色线条模拟夜空。

def create_timeline_chart(self, center_date=None, days=30):
    if center_date is None:
        center_date = datetime(2025, 10, 6)
    start_date = center_date - timedelta(days=15)
    fig, ax = plt.subplots(figsize=(24, 12))
    
    for i in range(days):
        current_date = start_date + timedelta(days=i)
        phase = self.calculator.get_moon_phase(current_date)
        is_mid_autumn = self.calculator.is_mid_autumn_festival(current_date)
        
        x_pos = i * 3.5  # 增大间距避免重叠
        y_pos = 0
        self.draw_moon(ax, phase, size=1.0, position=(x_pos, y_pos), is_mid_autumn=is_mid_autumn)
        
        ax.text(x_pos, -3.0, current_date.strftime('%m-%d'), ha='center', va='top', fontsize=11)
        
        if is_mid_autumn:
            ax.text(x_pos, 3.5, '2025 年中秋节', ha='center', va='bottom', fontsize=14, color='red')

图像编码与导出

将 Matplotlib 图形转换为 Base64 字符串是生成 HTML 的关键步骤。使用内存缓冲区可以避免临时文件写入，提高性能。

def fig_to_base64(self, fig):
    buffer = io.BytesIO()
    fig.savefig(buffer, format='png', facecolor=fig.get_facecolor(), bbox_inches='tight', dpi=150)
    buffer.seek(0)
    image_png = buffer.getvalue()
    buffer.close()
    plt.close(fig)  # 释放内存
    graphic = base64.b64encode(image_png)
    return graphic.decode('utf-8')

前端特效设计

HTML 界面通过 CSS3 动画实现星空闪烁和流星划过效果，JavaScript 负责动态生成 DOM 元素。

CSS 动画示例：

/* 星空背景动画 */
@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* 流星效果 */
@keyframes shooting {
    0% { transform: rotate(-45deg) translateX(0) translateY(0); opacity: 1; }
    100% { transform: rotate(-45deg) translateX(-800px) translateY(800px); opacity: 0; }
}

JS 交互逻辑：

// 创建随机分布的星星
function createStars() {
    const starsContainer = document.getElementById('stars');
    const numberOfStars = 120;
    for (let i = 0; i < numberOfStars; i++) {
        const star = document.createElement('div');
        star.className = 'star';
        star.style.left = Math.random() * 100 + '%';
        star.style.top = Math.random() * 100 + '%';
        // 随机大小与延迟
        const size = Math.random() * 3 + 1;
        star.style.width = size + 'px';
        star.style.height = size + 'px';
        star.style.animationDelay = Math.random() * 3 + 's';
        starsContainer.appendChild(star);
    }
}

总结

本方案通过 Python 后端计算与前端渲染的结合，实现了月相数据的工程化落地。关键点在于相位算法的精度控制、Matplotlib 绘图参数的调优以及前端动效的性能平衡。开发者可根据实际需求扩展年份支持或增加更多天文数据维度。