简介

本工具是一个基于SVG和原生JavaScript开发的交互式几何教学演示网页，专为小学高年级至初中阶段的平行四边形面积公式教学设计。它通过动态可视化的方式，完整呈现"切割-平移-拼接"的标准推导过程，将传统静态板书转化为可控制、可调参的沉浸式学习体验。支持底边、高度、倾斜度三维度参数调节，所有图形变化均响应网格系统，帮助学生在"数形结合"中建立面积守恒的数学直觉。

主要功能

1. 动态参数调节系统

• 底边长度：200-350cm可调（25cm步进，自动对齐网格）
• 高度调节：100-200cm可调（25cm步进）
• 倾斜度控制：50-125cm可调（25cm步进）
• 实时网格计数：自动显示底边和高度所占网格数，强化单位面积概念

2. 五步推导动画演示

演示流程：Step 0 → 初始平行四边形（标注底边a和高h）Step 1 → 显示红色虚线切割线（沿高线分割）Step 2 → 切分为直角三角形+梯形（分色显示）Step 3 → 三角形平移动画（带箭头指示，耗时2.5秒）Step 4 → 拼接成长方形（展示等积变换结果）Step 5 → 公式总结（显示S=a×h的最终推导）

3. 双模式播放控制

• 自动演示模式：智能步进（各步骤时长3-4.5秒），支持暂停/继续
• 手动控制模式：上一步/下一步按钮精准导航
• 进度条可视化：实时显示当前演示进度百分比

4. 智能标注系统

• 尺寸标注：动态显示底边、高的数值标签
• 直角标记：红色虚线高线+直角符号
• 面积计算公式：每步显示对应的阶段性公式
• 动画提示：平移步骤显示橙色箭头与文字说明

5. 响应式设计

• 适配PC、平板、手机多端显示
• 移动端优化：控制按钮垂直排列，滑块支持触摸拖拽
• 高清SVG矢量图形，任意缩放不失真

适用场景

使用说明

基础操作流程

1. 启动工具

   • 双击HTML文件或在浏览器中打开链接
   • 等待SVG画布初始化完成（约1秒）

2. 调节图形参数（可选）

   • 拖动底边长度滑块 → 观察图形横向变化，注意网格数更新
   • 拖动高度滑块 → 观察图形纵向缩放
   • 拖动倾斜度滑块 → 观察平行四边形"倾斜"程度变化
   • 教学提示：建议先设置为底边275cm、高150cm、倾斜75cm（默认值），确保切割后三角形为明显的直角三角形

3. 选择播放模式

   • 全自动演示：点击【开始演示】按钮，系统将自动播放5个步骤（总时长约18秒）
   • 手动逐步演示：点击【下一步】按钮，每步停留时间由教师掌控
   • 回退复习：点击【上一步】可返回前一状态，适合学生提问时回溯

4. 关键观察点引导

   步骤	学生应观察的重点	教师提问建议
   Step 1	红色切割线与高的关系	"这条线有什么特殊位置关系？"
   Step 2	切割后的两个图形形状	"左侧是什么三角形？为什么？"
   Step 3	三角形平移的方向和距离	"平移了多少厘米？面积变了吗？"
   Step 4	拼接后的图形边角关系	"新图形是长方形吗？如何验证？"
   Step 5	公式中每个字母的含义	"a和h分别代表什么？在图上指出来"

5. 重置与重复

   • 点击【重置】按钮恢复初始状态
   • 修改参数后再次演示，验证不同尺寸下的普适性
   • 高阶探究：设置倾斜度=125cm（最大值），观察平移后是否仍为标准长方形，理解"沿高切割"的必要性