🔬 简介

光的直线传播演示是一款基于HTML5 Canvas开发的交互式物理教学演示工具，由孔苏未来教育研究院设计。该工具通过模拟光源发射、障碍物遮挡、阴影形成的完整光学过程，将光的直线传播原理可视化。用户可自由调节光源位置、障碍物参数，实时观察光线传播路径变化，并支持阴影计算与几何验证，是初中物理光学章节的理想数字化教具。

🎯 主要功能

1. 双核参数调控系统

• 光源控制：滑块调节X/Y坐标（50-200px/200-400px），光线数量4-16条可调
• 障碍物控制：独立调节位置、宽度（40-120px）、高度（60-140px），支持任意场景构建

2. 四阶可视化演示模式

• 基础光线追踪：实时渲染黄色渐变光线，带方向箭头，受阻自动终止
• 阴影区域计算：黑色半透明渲染阴影，边界自动延伸计算
• 几何验证辅助：红色虚线连接光源与障碍物四角，标注A/B/C/D关键点
• 背景网格坐标系：提供精确位置参考

3. 智能动画播放系统

• 13秒分步动画：依次展示光源→光线发射→障碍物→阴影形成→几何分析
• 自适应播放：支持中途暂停、重置，按钮状态智能管理

4. 实时测量与数据反馈

• 阴影角度：计算上下边界光线夹角（精确到0.1°）
• 光源距离：动态显示光源到障碍物中心距离
• 阴影长度：自动计算并显示投射长度

5. 生活实例知识库

内置四大应用场景卡片：

• 🌅 日食现象（天体遮挡原理）
• 🏢 建筑物测高（工程应用）
• 🕳️ 小孔成像（光学成像）
• 🎭 手影游戏（日常趣味）

6. 响应式交互体验

• 设备适配：支持PC、平板、手机多端使用
• 高DPI支持：自动适配Retina等高分辨率屏幕
• 触控优化：滑块支持拖拽操作

🏫 适用场景

适合年级：初中二年级（人教版物理光学章节）

📖 使用说明

环境要求

• 现代化浏览器（Chrome 80+/Firefox 75+/Safari 13+）
• 支持JavaScript和Canvas渲染
• 网络连接（仅首次加载需要）

基础操作流程

步骤一：参数初始化

1. 打开页面后，系统自动加载默认场景（光源在左，障碍物居中）
2. 观察右侧信息面板的实验原理说明
3. 查看底部图例理解颜色编码含义

步骤二：自由探究模式

1. 调节光源：拖动"光源X/Y位置"滑块，观察光线扇形区域变化
2. 设置障碍物：调整障碍物位置/大小，观察阴影区域动态变化
3. 增减光线：修改"光线数量"，理解采样密度对观察效果的影响

步骤三：验证分析模式

1. 点击 "显示阴影" 按钮，观察黑色阴影区域渲染
2. 点击 "几何验证" 按钮，查看红色辅助线与关键点标注
3. 查看左侧"测量数据"面板，记录角度、距离参数

步骤四：动画演示模式

1. 点击 "播放动画" 按钮，系统将自动执行13秒分步演示
2. 动画过程中按钮锁定，防止干扰
3. 播放结束后自动进入完整可视化状态

步骤五：重置与对比

1. 点击 "重置" 按钮恢复初始状态
2. 可多次调节参数进行对比实验，探究"光源高度-阴影长度"关系

高级使用技巧

• 精准测量：开启"几何验证"后，配合背景网格可估算光线入射角
• 日食模拟：将障碍物调至居中，光源置左上方，模拟月球遮挡太阳
• 小孔成像：设置障碍物高度极小（60px），观察类似小孔成像效果
• 数据记录：截图保存不同参数下的测量数据，用于绘制关系图像

注意事项

• 动画播放期间请勿频繁点击按钮，避免渲染冲突
• 移动端使用时建议横屏操作以获得更佳画布视野
• 如阴影显示异常，尝试点击"重置"按钮刷新场景计算