Class StarField

Represents a star field background displayed on a canvas. Extends the CanvasBG class to inherit base canvas background functionality.

Example

// Create a StarField instance with a canvas selector
const starField = new StarField('#myCanvas');

// Use previously created CanvasBG instance
const mainCanvas = new CanvasBG();
const starField = new StarField(mainCanvas);

// Chain with previously created CanvasBG instance
const bg = new CanvasBG()
  .use(new StarField());

Configuration options:

  • speed - The speed of the stars. Default is 0.001 .
  • points - The number of points to display. Default is 150.
  • alpha - The global alpha value of the stars. Default is 1.
  • feed - The direction from which the stars will be fed. Default is anywhere.

Example

// Create a StarField instance with configuration options
const starField = new StarField('#myCanvas', { speed: 0.002, points: 200 });

// Chain a StarField instance with configuration options using a previously created CanvasBG instance
const bg = new CanvasBG()
  .use(new StarField(null, { speed: 0.002, points: 200 }));

Hierarchy (view full)

Constructors

constructor

Properties

defaultAlias dots

Accessors

layers size

Methods

animate use

Constructors

constructor

Properties

Readonly defaultAlias

defaultAlias: "starfield" = "starfield"

Gets the default alias for the CanvasBG class.

dots

dots: Particle[] = []

Accessors

layers

  • get layers(): Record<string, Layer>

  • Gets the layers associated with the current CanvasBG instance. The layers are stored as key-value pairs, where the key is the layer name and the value is the associated CanvasBG instance. the __main key is reserved for the main CanvasBG instance. zIndex is used to sort the layers.

    Returns Record<string, Layer>

    Example

    const bg = new CanvasBG(".bg-canvas")
    .use(new StarField(null, { speed: { x: 0, y: 0, z: 0.001 }, points: 150 }))
    .use(new MouseTracker(), { as: "mousetracker", zIndex:100}) // associate with a key
    .use(new Constellation()); // associate without a key (default key is the class name)
    console.log(bg.layers.__main === bg); // true

    layers is always points same address on all siblings

    Example

    const mainCanvas = new CanvasBG();
    const starField = new StarField(mainCanvas);
    const mouseTracker = new MouseTracker(mainCanvas);
    mainCanvas
      .use(starField, { as: "starfield" })
      .use(mouseTracker, { as: "mousetracker" });
    console.log(mainCanvas.layers === starField.layers); // true

    @returns The layers associated with the current CanvasBG instance.
    @remarks Do not modify this property directly; use the `use` method to associate layers.

size

  • get size(): {
        height: number;
        width: number;
    }

  • Returns {
        height: number;
        width: number;
    }

    • height: number
    • width: number

Methods

animate

  • animate(): void

  • Initiates the animation loop for the canvas. This method clears the canvas, calls the draw method to draw one frame, and schedules the next frame using requestAnimationFrame(). You can override the draw method to customize drawing behavior. Make sure to call this method after binding the canvas context.

    Returns void

    Example

    const bg = new CanvasBG(".bg-canvas")
    .use(new StarField(null, { speed: { x: 0, y: 0, z: 0.001 }, points: 150 }))
    .use(new MouseTracker())
    .use(new Constellation());
    bg.animate();

    Remarks

    Don't override this method; it is used internally to bind the context.

use

  • use(canvasbg, config?): StarField

  • Associates the current CanvasBG instance with another CanvasBG instance. This method binds the current instance with the provided canvasbg instance, allowing the current instance to inherit properties and functionality from the provided instance.

    (see animate() method for a complete example)

    Parameters

    • canvasbg: CanvasBG<any>

      The CanvasBG instance to be associated with.

    • Optional config: Partial<LayerConfig>

    Returns StarField

    The current CanvasBG instance after association.

    Remarks

    Don't override this method; it is used internally to bind the context.

Settings

Member Visibility

Theme

On This Page

constructordefaultAliasdotslayerssizeanimateuse