图１　系统框架图
2.2.1 Canvas标签
Canvas标签是HTML5新引入的特性，它采用
JavaScript脚本语言进行控制，允许程序员在浏览器指定的
区域中进行自由绘图。而新引入的Canvas不仅提供了基本的
2D绘图功能，还提供3D绘图的功能，底层都是直接操作本
地显卡，绘图性能及效果都得到大大提升，在移动端上也能
得到较好的支持。
2.2.2 Websocket
WebSocket协议是HTML5的一种新的协议。它实
现了浏览器与服务器全双工通信[6]。当浏览器中加入了
WebSocket协议以后，就能更好地节省服务器资源和带宽，李圆（1984-），女，广东河源人，本科，计算机讲师。研究方向：信息技术类教学。
图２　开启服务器工作流程图　
javascript游戏引擎
服务器在开启过程中便要处理异常情况，万一数据库连接不上或者由于一些原因其他模块启动不了，便要输出错误信息并停止运行，让开发人员处理好以后，确保运行正常才开启服务并侦听端口。
服务器开启以后，只要用户在浏览器中输入服务器的访问地址和相应的端口，便能访问到服务器通过HTTP
网站服务。
图３　用户注册和登录流程图　
该过程主要是对Node.JS服务端中控制器、模型和视图部件的设计编写，控制器部件负责判断用户的登录状态，并为用户跳转到相应的界面，模型部件则控制用户的数据存取查询，视图部件负责定义页面上看到的文本框等信息。
3.2.3 在线画板交互过程
画板主要分为了交互过程和信息处理过程，交互过程体现在画板响应用户绘制行为，在画板上绘制出相应图案并记录绘制信息以发送到服务端。信息处理过程体现在向服务端
图４　画板交互与信息处理流程
前端通过Socket连接服务端以后，并保持着这个
的连接状态，以后用于向服务端发送和接收信息。用户与画板交互以后，交互操作的结果不仅仅要反映到本地画板上，操作得到的绘图信息也要反馈到服务端并转发给其他用户，而其他用户的操作信息也同样被转发到本机用户上，因此，形成了一个共享的在线画板。
画板效果
为了测试效果，在本地建立服务器以后，分别打开两个浏览器并注册两个新的账户以作测试。同时登陆到画板界面，并在其中一个画板上随意绘制图案，可以看到此时两块画板同时显示出相同的图案。效果图如图5所示：
图５　在线画板效果展示
（下转第181

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。