Skip to content

moefyit/moefy-canvas

Repository files navigation

Moefy Canvas

用可可爱爱的 canvas 动效装饰你的网页吧~

前往文档 → https://moefy-canvas.nyakku.moe

Install

这里以 Sparkler 为例

pnpm add @moefy-canvas/theme-sparkler

Usage

<canvas id="moefy-canvas"></canvas>

零配置就可以快速创建一个动效~

import { Sparkler } from '@moefy-canvas/theme-sparkler'

const el = document.getElementById('moefy-canvas')
const sparkler = new Sparkler()
sparkler.mount(el as HTMLCanvasElement)

如果需要对其进行配置,只需要这样就可以啦~

import {
   Sparkler,
   SparklerMode,
   type SparklerConfig,
   type CanvasOptions,
   MAX_Z_INDEX,
} from '@moefy-canvas/theme-sparkler'

const themeConfig: SparklerConfig = {
   mode: SparklerMode.TRAIL,
}

const canvasOptions: CanvasOptions = {
   opacity: 1,
   zIndex: MAX_Z_INDEX,
}

const el = document.getElementById('moefy-canvas')
const sparkler = new Sparkler(themeConfig, canvasOptions)
sparkler.mount(el as HTMLCanvasElement)

所有主题都有着统一的接口,使用方法一致~

export interface CanvasOptions {
   opacity?: number // default: 1
   zIndex?: number // default: 0
}

export type ThemeConfig = Record<string, any>

export abstract class Theme<T extends ThemeConfig> {
   constructor(themeConfig?: T, canvasOptions?: CanvasOptions) {}
   abstract mount(el: HTMLCanvasElement): void
   abstract unmount(): void
}

Themes

Mouse cursor effects themes

  • theme popper 🎉
  • theme sparkler 🎇

Background themes

  • theme ribbon 🎗️
  • theme sakura 🌸
  • theme meteor 🌠

TODO