基于HTML5的算法动画可视化平台

HTML5-Based Algorithm Animation Online Platform

基于新一代的HTML5标准,设计实现了一个算法动画可视化平台,并实际用于教学实践。平台包括算法动画开发库、可视化编辑器和辅助教学网站。算法动画开发库中绘图模块基于HTML5 Canvas和JavaScript提供主要动画元素和效果的类库,动画生成模块进一步把这些类封装成绘制框架和函数,在动画创建过程中存储和定时更新画布。设计了一种基于时间线的脚本序列语法定义、存储与动画缩略图生成方法,在此基础上设计了支持离线工作的可视化编辑器。在这些工作基础上,设计实现了辅助教学的"新手画呀"网站,支持在线编辑动画、评论和分享等功能,丰富了教学手段。在初步的教学实践中,平台表现出良好的应用成效。

A novel visualized algorithm animation online platform was developed on HTML 5 which included development library, online editor with website. The development library contained animation drawing and generation modules. The drawing module offered a library for animation elements and effects based on HTML5 Canvas and JavaScript, and the generation one further packaged it into framework and functions with the animation storage and update. A timeline-based scheme for script sequence definition, storage and snapshot generation was proposed. On the basis of work above, a teaching website was implemented, which provided an online algorithm-animation editor, comments and sharing. This platform has been applied in several course teaching.