/** * A Gradient object representing a linear or radial gradient fill. * Created via {@link Renderer#createLinearGradient} or {@link Renderer#createRadialGradient}. * Can be passed to {@link Renderer#setColor} as a fill style. */ export class Gradient { /** * @param {"linear"|"radial"} type - the gradient type * @param {number[]} coords - gradient coordinates [x0, y0, x1, y1] for linear, [x0, y0, r0, x1, y1, r1] for radial */ constructor(type: "linear" | "radial", coords: number[]); /** * gradient type * @type {"linear"|"radial"} */ /** @ignore */ _id: number; type: "linear" | "radial"; /** * gradient coordinates * @type {number[]} * @ignore */ coords: number[]; /** * color stops * @type {Array<{offset: number, color: string}>} * @ignore */ colorStops: Array<{ offset: number; color: string; }>; /** * cached canvas gradient (for Canvas renderer) * @type {CanvasGradient|undefined} * @ignore */ _canvasGradient: CanvasGradient | undefined; /** * cached gradient render target (for WebGL renderer) * @type {CanvasRenderTarget|undefined} * @ignore */ _renderTarget: CanvasRenderTarget | undefined; /** * whether the gradient needs to be regenerated * @type {boolean} * @ignore */ _dirty: boolean; /** * cached parsed Color objects for sampling (lazily built) * @type {{offset: number, color: Color}[]|null} * @ignore */ _parsedStops: { offset: number; color: Color; }[] | null; /** * Add a color stop to the gradient. * @param {number} offset - value between 0.0 and 1.0 * @param {Color|string} color - a CSS color string or Color object * @returns {Gradient} this gradient for chaining * @example * gradient.addColorStop(0, "#FF0000"); * gradient.addColorStop(0.5, "green"); * gradient.addColorStop(1, "blue"); */ addColorStop(offset: number, color: Color | string): Gradient; /** * Get or create a native CanvasGradient for use with a 2D context. * @param {CanvasRenderingContext2D} context - the 2D context to create the gradient on * @returns {CanvasGradient} * @ignore */ toCanvasGradient(context: CanvasRenderingContext2D): CanvasGradient; /** * Render the gradient onto a canvas matching the given draw rect. * Uses the original gradient coordinates so the result matches Canvas 2D behavior. * @param {CanvasRenderer|WebGLRenderer} renderer - the active renderer (used to invalidate GPU texture) * @param {number} x - draw rect x * @param {number} y - draw rect y * @param {number} width - draw rect width * @param {number} height - draw rect height * @returns {HTMLCanvasElement|OffscreenCanvas} the rendered gradient canvas * @ignore */ toCanvas(renderer: CanvasRenderer | WebGLRenderer, x: number, y: number, width: number, height: number): HTMLCanvasElement | OffscreenCanvas; /** * Get the interpolated color at a given position along the gradient. * Useful for procedural effects like trails that need per-segment colors. * @param {number} position - position along the gradient (0.0–1.0) * @param {Color} out - output Color object to write into * @returns {Color} the output Color object * @example * const gradient = new Gradient("linear", [0, 0, 1, 0]); * gradient.addColorStop(0, "#ff0000"); * gradient.addColorStop(1, "#0000ff"); * gradient.getColorAt(0.5, myColor); // myColor is now purple */ getColorAt(position: number, out: Color): Color; /** * Build the parsed Color cache from colorStops strings. * @ignore */ _buildParsedStops(): void; /** * Release pooled resources held by this gradient. */ destroy(): void; } import CanvasRenderTarget from "./rendertarget/canvasrendertarget.js"; import type { Color } from "../math/color.ts"; //# sourceMappingURL=gradient.d.ts.map