effects/gradient.js

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

export class GradientEffect extends BaseEffect {
    constructor() {
        super();
    }

    async setupContext(ctx, options) {
        ctx.font = `${options.fontSize}px "${options.font}"`;
        ctx.textBaseline = 'top';
        
        // グラデーションの作成
        const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, ctx.canvas.height);
        gradient.addColorStop(0, '#ff0000');
        gradient.addColorStop(0.25, '#ffff00');
        gradient.addColorStop(0.5, '#00ff00');
        gradient.addColorStop(0.75, '#00ffff');
        gradient.addColorStop(1, '#0000ff');
        ctx.fillStyle = gradient;
    }
}