https://github.com/laddzhao/finger-drawing-app

基于手势识别的指尖签名板 - 使用摄像头通过手指在空中书写和绘画的网页应用
https://github.com/laddzhao/finger-drawing-app

canvas computer-vision creative-tools drawing-app gesture-recognition hand-tracking human-computer-interaction javascript mediapipe web-application

Last synced: 5 months ago
JSON representation

基于手势识别的指尖签名板 - 使用摄像头通过手指在空中书写和绘画的网页应用

• Host: GitHub
• URL: https://github.com/laddzhao/finger-drawing-app
• Owner: laddzhao
• Created: 2025-11-29T04:31:34.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2026-01-15T13:01:55.000Z (5 months ago)
• Last Synced: 2026-01-15T17:18:49.295Z (5 months ago)
• Topics: canvas, computer-vision, creative-tools, drawing-app, gesture-recognition, hand-tracking, human-computer-interaction, javascript, mediapipe, web-application
• Language: JavaScript
• Homepage: https://laddzhao.github.io/finger-drawing-app/
• Size: 18.8 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 指尖签名板 - Finger Drawing App

一个基于手势识别的网页应用，允许用户通过摄像头使用手指在空中书写和绘画。

![项目演示](https://img.shields.io/badge/演示-在线试用-blue)

![技术栈](https://img.shields.io/badge/技术栈-HTML%2FCSS%2FJavaScript-green)

![许可证](https://img.shields.io/badge/许可证-MIT-lightgrey)

## 功能特点

- ✨ **手势识别** - 使用 MediaPipe Hands 进行实时手部跟踪

- 🎨 **自定义线条** - 可调节线条粗细和颜色

- 📱 **响应式设计** - 适配各种屏幕尺寸

- 🔄 **镜像模式** - 可切换摄像头镜像显示

- 💾 **保存作品** - 一键保存绘画为 PNG 图片

- 🖐️ **直观手势** - 食指书写，张开手掌结束

### 在线试用

直接访问 [[GitHub Pages 链接](https://laddzhao.github.io/finger-drawing-app/)] 即可体验应用。

### 图片展示

![image](https://laddzhao.github.io/finger-drawing-app/finger-drawing.png)

# Finger Drawing App - Air Canvas

An innovative web application that uses computer vision and gesture recognition to enable users to write and draw in the air using their fingers through the camera.

## 🚀 Key Features

- **Gesture Control** - Write naturally using your index finger

- **Real-time Feedback** - Instant visual tracking

- **Customizable Settings** - Adjust line width and color

- **Save Artwork** - Export your creations with one click

- **Mirror Mode** - Intuitive visual feedback

## 💡 Technical Highlights

- Powered by Google MediaPipe Hands recognition

- Pure frontend implementation, no backend required

- Responsive design for all devices

- Efficient rendering with Canvas API

No download required - experience the future of interaction right in your browser!