文字聊天室

基于HTML5的在線答疑系統(tǒng)的白板設(shè)計(jì)與實(shí)現(xiàn)

摘要：利用HTML5的Canvas技術(shù)為在線答疑系統(tǒng)設(shè)計(jì)并實(shí)現(xiàn)了實(shí)

時(shí)白板功能，該功能可滿足網(wǎng)絡(luò)環(huán)境下教學(xué)、答疑的實(shí)時(shí)白板演示的

需要，同時(shí)為網(wǎng)絡(luò)幾何問題討論提供了技術(shù)支持。

關(guān)鍵詞：HTML5；網(wǎng)絡(luò)電子白板；在線答疑；教學(xué)互動(dòng)

0引言

在網(wǎng)絡(luò)虛擬教學(xué)環(huán)境下，教師常需要一個(gè)類似于教室中的白板

（或黑板），以繪圖或板書的形式為學(xué)生講解問題。以前由于技術(shù)的

局限，實(shí)現(xiàn)該功能有一定的難度。HTML5中的一些新技術(shù)為解決該

問題提供了途徑。

本文利用HTML5中的元素，用代碼設(shè)計(jì)并實(shí)現(xiàn)了在線

答疑系統(tǒng)的實(shí)時(shí)白板功能，可使之更好地服務(wù)于教學(xué)。

1白板功能的總體設(shè)計(jì)

在線答疑平臺(tái)的白板功能利用了目前最新的HTML5技術(shù)，通過

對現(xiàn)實(shí)教室中白板（黑板）的網(wǎng)絡(luò)虛擬化，實(shí)現(xiàn)了白板演示功能。同

時(shí)，結(jié)合Ajax技術(shù)和動(dòng)態(tài)網(wǎng)頁技術(shù)可實(shí)現(xiàn)畫面的實(shí)時(shí)廣播。系統(tǒng)采

用B/S（瀏覽器/服務(wù)器）模式，分為教師、學(xué)生兩個(gè)界面。教師可以

通過白板提供的鉛筆、點(diǎn)、線、矩形、圓、字等功能，輕松地在白板

上繪制板書內(nèi)容，而該板書內(nèi)容會(huì)實(shí)時(shí)通過網(wǎng)絡(luò)廣播到每個(gè)在線的學(xué)

生屏幕上。

本白板結(jié)合視頻、語音聊天功能，可以開發(fā)在線網(wǎng)絡(luò)教室等功能。

2白板的技術(shù)實(shí)現(xiàn)

2.1HTML5及元素

HTML5用于取代1999年所制定的HTML4.01和XHTML1.0標(biāo)

準(zhǔn)的HTML版本，現(xiàn)在仍處于發(fā)展階段，但大部分瀏覽器已經(jīng)支持

某些HTML5技術(shù)。HTML5強(qiáng)化了Web網(wǎng)頁的表現(xiàn)性能，并追加了

本地?cái)?shù)據(jù)庫等Web應(yīng)用的功能。人們論及HTML5時(shí)，實(shí)際指的是包

括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。

2.2白板的實(shí)現(xiàn)

網(wǎng)絡(luò)白板的內(nèi)容主要由點(diǎn)、線、矩形、圓、文字及各類路徑組成。

通過利用元素，編寫Javascript代碼即可實(shí)現(xiàn)這些內(nèi)容，關(guān)

鍵是設(shè)置和記錄如下屬性：

2.3教師白板內(nèi)容的廣播

實(shí)現(xiàn)了白板繪制只是第一步。要實(shí)現(xiàn)教師白板板書實(shí)時(shí)地廣播到

各個(gè)學(xué)生端，還需要經(jīng)過以下幾個(gè)步驟：

通過以上3個(gè)步驟，即可實(shí)現(xiàn)教師白板信息的實(shí)時(shí)廣播。

3結(jié)語

本文提出的在線答疑平臺(tái)網(wǎng)絡(luò)白板技術(shù)，在網(wǎng)絡(luò)虛擬環(huán)境下為教

師提供了實(shí)時(shí)的板書支持系統(tǒng)，從而使得網(wǎng)絡(luò)教學(xué)更加接近現(xiàn)實(shí)環(huán)

境。網(wǎng)絡(luò)白板技術(shù)結(jié)合視頻、音頻、文字等聊天室技術(shù)，可以實(shí)現(xiàn)在

線虛擬教室，為學(xué)生課外答疑、在線教學(xué)的網(wǎng)絡(luò)教學(xué)互動(dòng)方式提供了

方便，適用于各類學(xué)校和各類不同課程教學(xué)答疑環(huán)境的搭建，有利于

師生之間、學(xué)生之間建立良性互動(dòng)，有利于指導(dǎo)者和學(xué)習(xí)者充分利用

豐富的網(wǎng)絡(luò)資源，進(jìn)而補(bǔ)充課堂學(xué)習(xí)的不足，使學(xué)習(xí)者獲得對知識(shí)的

深刻理解，提高學(xué)習(xí)效率。

參考文獻(xiàn)：

[1]金貴朝，袁貞明，諸彬.基于草圖識(shí)別技術(shù)的智能網(wǎng)絡(luò)白板系

統(tǒng)[J].中國電化教育，2008（2）.

[2]龍奇.新一代網(wǎng)絡(luò)技術(shù)標(biāo)準(zhǔn)HTML5的研究[J].科技信息，2011

（10）.

[3]劉斌.HTML5—未來網(wǎng)絡(luò)應(yīng)用的核心技術(shù)研究[J].自動(dòng)化與儀

器儀表，2010（4）.