文字聊天室

基于HTML5的在线答疑系统的白板设计与实现

摘要：利用HTML5的Canvas技术为在线答疑系统设计并实现了实

时白板功能，该功能可满足网络环境下教学、答疑的实时白板演示的

需要，同时为网络几何问题讨论提供了技术支持。

关键词：HTML5；网络电子白板；在线答疑；教学互动

0引言

在网络虚拟教学环境下，教师常需要一个类似于教室中的白板

（或黑板），以绘图或板书的形式为学生讲解问题。以前由于技术的

局限，实现该功能有一定的难度。HTML5中的一些新技术为解决该

问题提供了途径。

本文利用HTML5中的元素，用代码设计并实现了在线

答疑系统的实时白板功能，可使之更好地服务于教学。

1白板功能的总体设计

在线答疑平台的白板功能利用了目前最新的HTML5技术，通过

对现实教室中白板（黑板）的网络虚拟化，实现了白板演示功能。同

时，结合Ajax技术和动态网页技术可实现画面的实时广播。系统采

用B/S（浏览器/服务器）模式，分为教师、学生两个界面。教师可以

通过白板提供的铅笔、点、线、矩形、圆、字等功能，轻松地在白板

上绘制板书内容，而该板书内容会实时通过网络广播到每个在线的学

生屏幕上。

本白板结合视频、语音聊天功能，可以开发在线网络教室等功能。

2白板的技术实现

2.1HTML5及元素

HTML5用于取代1999年所制定的HTML4.01和XHTML1.0标

准的HTML版本，现在仍处于发展阶段，但大部分浏览器已经支持

某些HTML5技术。HTML5强化了Web网页的表现性能，并追加了

本地数据库等Web应用的功能。人们论及HTML5时，实际指的是包

括HTML、CSS和JavaScript在内的一套技术组合。

2.2白板的实现

网络白板的内容主要由点、线、矩形、圆、文字及各类路径组成。

通过利用元素，编写Javascript代码即可实现这些内容，关

键是设置和记录如下属性：

2.3教师白板内容的广播

实现了白板绘制只是第一步。要实现教师白板板书实时地广播到

各个学生端，还需要经过以下几个步骤：

通过以上3个步骤，即可实现教师白板信息的实时广播。

3结语

本文提出的在线答疑平台网络白板技术，在网络虚拟环境下为教

师提供了实时的板书支持系统，从而使得网络教学更加接近现实环

境。网络白板技术结合视频、音频、文字等聊天室技术，可以实现在

线虚拟教室，为学生课外答疑、在线教学的网络教学互动方式提供了

方便，适用于各类学校和各类不同课程教学答疑环境的搭建，有利于

师生之间、学生之间建立良性互动，有利于指导者和学习者充分利用

丰富的网络资源，进而补充课堂学习的不足，使学习者获得对知识的

深刻理解，提高学习效率。

参考文献：

[1]金贵朝，袁贞明，诸彬.基于草图识别技术的智能网络白板系

统[J].中国电化教育，2008（2）.

[2]龙奇.新一代网络技术标准HTML5的研究[J].科技信息，2011

（10）.

[3]刘斌.HTML5—未来网络应用的核心技术研究[J].自动化与仪

器仪表，2010（4）.