effects/multiline-neon.js

import { BaseEffect } from './base.js';

export class MultilineNeonEffect extends BaseEffect {
    constructor() {
        super();
        this.glowOptions = {
            color: '#00ffff',
            blur: 90,
            iterations: 6
        };
        this.strokeOptions = {
            color: '#ffffff',
            width: 1
        };
    }

    async setupContext(ctx, options) {
        ctx.font = `${options.fontSize}px "${options.font}"`;
        ctx.textBaseline = 'top';
        ctx.fillStyle = '#00ffff'; // シアン色のメインカラー
    }

    async applySpecialEffect(ctx, canvas, options) {
        // 追加のネオン効果（オプション）
        ctx.globalCompositeOperation = 'lighter';
        ctx.shadowBlur = 10;
        ctx.shadowColor = '#00ffff';
        ctx.globalAlpha = 0.3;
        
        // 既に描画されたテキストの上に薄く重ねて光る効果を追加
        await this.renderMainText(ctx);
        
        // 設定を元に戻す
        ctx.globalCompositeOperation = 'source-over';
        ctx.shadowBlur = 0;
        ctx.globalAlpha = 1.0;
    }
}