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

• theme sakara 🌸, ref: https://github.com/jhammann/sakura
• 优化 sakura 的效果（目前效果只是简单能看，尚需仔细调优）
• 增加非全屏支持
• theme popper 🎉, 添加新形状 Confetti 🎊，ref: https://github.com/catdad/canvas-confetti
• 增加动态的 Ribbon，ref: https://gist.github.com/imaegoo/074b5842d9cd8d80ecfa0d3fa4ecd556
• 使用 OffscreenCanvas
• 尝试使用 Web Workder 进行离屏渲染
• 尝试 wasm