📐 数学函数自动作图工具

输入数学函数，自动绘制曲线 — 纯 HTML/CSS/JS 实现，零依赖，开箱即用。

✨ 功能特性

功能	说明
函数输入	支持 sin, cos, tan, asin, acos, atan, log, exp, sqrt, abs, pow 等数学函数
运算符	+ - * / ^ ( ) 全部支持，^ 自动转换为幂运算
常量	pi (π), e (自然常数)
多函数叠加	同时绘制多条函数曲线，自动分配颜色
交互缩放	鼠标滚轮缩放，以鼠标位置为中心
拖拽平移	鼠标拖拽画布平移坐标系
触摸支持	移动端单指拖拽平移
自适应网格	根据缩放级别自动调整网格间距和刻度
实时渲染	输入即渲染，无需点击按钮
预设函数	12 个常用函数一键添加
渐近线处理	自动检测 tan(x) 等函数的渐近线跳变并断开曲线
发光效果	曲线带 shadow blur 发光，视觉效果出众

🚀 快速开始

# 方式1：直接打开
open index.html

# 方式2：本地服务器（推荐）
python3 -m http.server 8080
# 然后访问 http://localhost:8080

无需安装任何依赖，无需构建步骤。

📖 使用示例

在输入框中输入以下函数表达式：

输入	效果
sin(x)	正弦曲线
2*sin(x)+cos(2*x)	复合波形
x^2	抛物线
x^3-3*x	三次多项式
sin(x)/x	sinc 函数（有可去奇点）
exp(-x^2)	高斯函数
abs(x)	绝对值
log(x)	自然对数
sqrt(x)	平方根

🏗️ 技术架构

math-grapher/
├── index.html    # 主页面：侧边栏 + 画布布局
├── style.css     # 暗色主题现代 UI
└── script.js     # 核心逻辑

核心模块

1. MathParser — 数学表达式解析器

   • 将用户输入映射为 JavaScript Math 对象方法
   • ^ → ** 幂运算转换
   • Function 构造器编译 + try-catch 安全求值

2. GraphRenderer — Canvas 渲染器

   • 坐标系绘制（网格、坐标轴、刻度标签）
   • 函数曲线绘制（发光效果、渐近线断开）
   • 交互事件（滚轮缩放、拖拽平移、触摸支持）
   • 自适应网格间距算法

3. App — 应用控制器

   • 函数列表管理（增删改）
   • 预设函数快速添加
   • 控制面板联动

🎨 设计亮点

• 暗色主题：深色背景 + 渐变色标题，护眼且现代
• 发光曲线：每条函数曲线带 shadowBlur 发光效果
• 颜色池：8 种预设颜色自动分配，多函数清晰区分
• 响应式布局：移动端自动切换为上下布局
• 信息栏：实时显示缩放比例、视图中心、鼠标坐标

📝 技术路线

• 零依赖：不使用任何第三方库，纯原生 Web API
• Canvas 2D：使用 Canvas 2D Context 绘制，性能优于 SVG
• DPR 适配：支持高分辨率屏幕（Retina），自动适配 devicePixelRatio
• 安全求值：Function 构造器 + "use strict" + try-catch 三重保障

📄 License

MIT