@moefy-canvas/theme-ribbon

🎗️ 背景的彩带效果～

Install

bash

pnpm add @moefy-canvas/theme-ribbon

Usage

html

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

ts

import {
  Ribbon,
  type RibbonConfig,
  type CanvasOptions,
  MAX_Z_INDEX,
} from '@moefy-canvas/theme-ribbon'

const themeConfig: RibbonConfig = {
  size: 90,
}

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

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

ThemeConfig

ts

export interface RibbonConfig extends ThemeConfig {
  size?: number
}