Library Canvas-UI 无依赖的Canvas原生UI组件库

很多 Web UI 库强依赖 DOM、虚拟 DOM 或一大堆运行时，想在 Canvas/游戏/可视化画布里画几个按钮、滑块、文本框，要么引入整套框架、要么自己手撸。对于“在 Canvas 上做轻量 UI”的场景，重框架是杀鸡用牛刀。
Canvas UI 的动机，是用纯原生 Canvas 画一套无依赖的 UI 组件，小、快、可嵌入任意画布。

项目基本信息

一、项目介绍

DavidHDev/canvas-ui 是一个 MIT 协议的开源库，用原生 Canvas 2D 绘制 UI 组件，零运行时依赖。它提供按钮、滑块、文本输入、面板等基础控件，全部直接画在 canvas 上，因此能无缝嵌入游戏、可视化、WebGL 叠加层或任何已有画布，而不必引入 DOM 或框架。它适合“在画布内做轻量交互 UI”的需求，强调小巧与可控。

二、核心优势

1. 零依赖：纯原生 Canvas 2D，不引入 DOM/虚拟 DOM/框架。
2. 可嵌入画布：按钮滑块等直接画在 canvas，适合游戏/可视化叠加层。
3. 轻量可控：组件小巧，渲染与事件你自己掌握节奏。
4. MIT 协议：自由用于商业与实验项目。
5. 即取即用：适合给 Canvas 场景快速加交互控件。

三、适用场景

• 在游戏或 WebGL 画布里加按钮/滑块/面板。
• 数据可视化叠加轻量交互控件，不想引 DOM 框架。
• 需要完全掌控渲染、避免框架开销的 Canvas 项目。
• 做演示/原型时快速在画布上加 UI。

四、安装教程

作为前端依赖安装（或按需打包源码）：

npm install canvas-ui

也可直接引入构建产物到页面。常见提示：它是 Canvas 渲染，需你自己把组件挂到已有的 canvas 与事件循环上；没有 DOM，所以样式用代码而非 CSS。

五、使用示例

在你的 canvas 上创建并使用一个控件（示意）：

import { Button } from 'canvas-ui'
const btn = new Button({ x: 20, y: 20, label: '提交' })
btn.onClick = () => { /* ... */ }
// 在你的 requestAnimationFrame 渲染循环里绘制 btn，并把 pointer 事件转发给它

真实效果：控件直接出现在 canvas 内，点击事件由你转发处理，无需任何 DOM 节点——叠加在游戏或可视化之上毫不违和。

六、常见问题

Q：它和 DOM 类 UI 库能混用吗？
A：可以，但它是独立画在 canvas 的；在同一页面里 DOM UI 与 Canvas UI 并存时，事件与层级需你自己协调。
Q：支持响应式/暗色吗？
A：视觉由代码绘制，响应式与主题需你自行实现或配置绘制参数。
Q：协议能商用吗？
A：采用 MIT License，可商用与修改，需保留版权与许可声明。

七、总结

Canvas UI 用原生 Canvas 2D 把轻量 UI 控件画进任意画布，零依赖、可嵌入游戏与可视化场景，避免为“画布里几个按钮”引入整套框架。对它适合的 Canvas 交互需求，它是 MIT 协议、小巧可控的务实选择。