国风山水交互画卷

状态：Completed / Frozen showcase — 这是一个已完成的纯前端视觉交互作品，当前没有持续产品化路线。代码保留用于展示 Canvas 程序化绘制、视差和交互实现；除兼容性或明显缺陷外不主动扩展功能。

基于 HTML5 Canvas 的中国水墨山水交互网页。程序化绘制青绿山水，支持鼠标视差、拖拽缩放、点击诗句卡片等强交互。

技术栈

• 纯前端：HTML5 Canvas + Vanilla JavaScript
• 零依赖，浏览器直接打开

交互

操作	效果
移动鼠标	6层视差景深
滚轮	缩放 0.5x~2x
拖拽	平移探索
点击楼阁	李白诗句卡片
点击瀑布	水花 + 诗句
双击	重置视角
闲置3秒	自动漫游

快速启动

python -m http.server 8888
# 打开 http://localhost:8888

项目结构

├── index.html
├── css/style.css
├── js/
│   ├── main.js         # 入口 & 渲染循环
│   ├── scene.js        # 6层场景 + 摄像机
│   ├── layers.js       # 程序化山水绘制
│   ├── particles.js    # 云雾/飞鸟/落花
│   └── interaction.js  # 鼠标/触屏交互