360 Secure SkillHub
360 安全技能中心

LeaferJS — Canvas 2D Engine

提供 LeaferJS 轻量高性能 Canvas 2D 图形引擎的使用参考,覆盖多平台安装(Web、Worker、Node.js、小程序)、引擎创建与配置、图形元素与样式、分组与编辑器、事件与调试等,适用于 UI 渲染、图形编辑、数据可视化和游戏开发。

openlark
openlark
热度 20.99
最近更新 2026-05-30 09:32:05
分类:开发依赖:纯提示词应用场景:代码生成 / UI 原型 / 概念解释

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add leaferjs
Metadata
name
leaferjs
description
LeaferJS — Canvas 2D Engine. Lightweight and high-performance Canvas 2D graphics engine, supporting multiple platforms such as Web, Worker, Node.js, and Mini Programs.

LeaferJS — Canvas 2D Engine

Use Cases

Suitable for UI rendering, graphic editing, data visualization, game development, and other scenarios.

Quick Start

npm install leafer-ui                         # ~70KB min+gzip
npm install leafer                             # 98KB + all plugins
npm install @leafer-ui/worker                  # Web Worker
npm install @leafer-ui/node skia-canvas        # Node.js
npm install @leafer-ui/miniapp                 # Mini-program (≥v3.6.0)

CDN: <script src="https://unpkg.com/leafer-ui@2.1.2/dist/web.min.js"></script> (Global variable LeaferUI, Image/PointerEvent aliases MyImage/MyPointerEvent)

import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
leafer.add(new Rect({ x: 100, y: 100, width: 100, height: 100, fill: '#32cd79' }))

Reference Index

File Coverage
references/quick-start.md Engine creation / configuration / viewport / framework integration (Vue/React/Nuxt/Next/SSR)
references/elements.md All graphic elements + styles + export + remove/destroy + performance + animation
references/groups.md Group/Box/Frame/App layers, editor
references/events.md Events / PointerEvent / lifecycle / debugging / engine config
references/install.md Multi-platform installation + FAQ + version management