如何在HTML Canvas上实现类似GIMP的Supernova效果？

核心思路 #

GIMP的Supernova特效并非高度定制到无法复现，本质是径向渐变星核+带扰动的放射光线+合成模式叠加+颗粒噪声的组合效果，完全可以用Canvas实现。

可参数化的实现代码 #

以下函数对应GIMP选项对话框中的核心参数，可灵活调整效果：

function drawSupernova(canvas, options) {
    const ctx = canvas.getContext('2d');
    const {
        centerX = canvas.width / 2,
        centerY = canvas.height / 2,
        radius = 150,        // 星核半径
        rayCount = 30,       // 光线数量
        rayLength = 200,     // 光线延伸长度
        rayThickness = 3,    // 光线粗细
        noiseIntensity = 0.1,// 光线扭曲程度
        glowOpacity = 0.6,   // 光晕透明度
        coreColor = '#ffd700',// 星核主色
        rayColor = '#fff',   // 光线颜色
        glowColor = '#ff8c00'// 光晕颜色
    } = options;

    // 1. 绘制背景光晕
    const glowGradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius + rayLength);
    glowGradient.addColorStop(0, `${glowColor}${Math.floor(glowOpacity * 255).toString(16)}`);
    glowGradient.addColorStop(1, 'transparent');
    ctx.fillStyle = glowGradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. 绘制星核
    const coreGradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
    coreGradient.addColorStop(0, coreColor);
    coreGradient.addColorStop(1, 'transparent');
    ctx.fillStyle = coreGradient;
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
    ctx.fill();

    // 3. 绘制带随机扰动的放射光线
    ctx.globalCompositeOperation = 'screen';
    ctx.strokeStyle = rayColor;
    ctx.lineWidth = rayThickness;

    for (let i = 0; i < rayCount; i++) {
        const angle = (i / rayCount) * Math.PI * 2;
        // 加入随机偏移模拟自然光线的不规则
        const noiseX = (Math.random() - 0.5) * noiseIntensity * rayLength;
        const noiseY = (Math.random() - 0.5) * noiseIntensity * rayLength;
        
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(
            centerX + Math.cos(angle) * rayLength + noiseX,
            centerY + Math.sin(angle) * rayLength + noiseY
        );
        ctx.stroke();
    }

    // 4. 叠加颗粒噪声，还原GIMP滤镜的质感
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        const noise = (Math.random() - 0.5) * 20;
        data[i] = Math.min(255, Math.max(0, data[i] + noise));
        data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + noise));
        data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + noise));
    }
    ctx.putImageData(imageData, 0, 0);
}

// 调用示例
const canvas = document.getElementById('supernova-canvas');
drawSupernova(canvas, {
    radius: 120,
    rayCount: 40,
    rayLength: 250,
    noiseIntensity: 0.15
});

关键细节说明 #

• 合成模式：使用screen混合模式叠加光线与光晕，是还原发光效果的核心，和GIMP的混合逻辑一致。
• 参数映射：函数参数完全对应GIMP对话框中的选项，调整即可获得不同风格的超新星效果。
• 噪声处理：最后添加的像素级噪声，模拟GIMP滤镜的颗粒感，让效果更贴近原生特效。

进阶优化 #

如果需要1:1还原GIMP的算法，可以参考GIMP开源代码中plug-ins/common/supernova.c的实现，提取其中的光线生成、扭曲逻辑直接移植到JS中。

内容的提问来源于stack exchange，提问作者Jez