2020年第5期
信息与电脑
China Computer & Communication
算法语言
基于HTML5的算法可视化编辑器研究
戴文鑫1 袁榕澳2
（1.四川大学 计算机学院，四川 成都 610065；2.四川大学 吴玉章学院，四川 成都 610065)
摘 要：基于最新的HTML5标准，笔者设计实现了一款算法可视化编辑器，可用于算法的动态演示、算法教学等。该设计建立在基于oCanvas 的动画框架和算法动画库上，设计出了基于时间线脚本序列的定义和存储。编辑器通过动画框架控制动画进程，通过调用算法动画库来实现动画效果，丰富了算法教学的手段。
关键词：HTML5；算法；编辑器；JavaScript
中图分类号：TP311.52 文献标识码：A 文章编号：1003-9767（2020）05-064-03
Research on The Visual Editor of Algorithm Based on HTML5
Dai Wenxin 1, Yuan Rongao 2
(1. College of Computer Science, Sichuan University, Chengdu Sichuan 610065, China; 2. Wu Yuzhang Honors College, Sichuan University, Chengdu Sichuan 610065, China)
Abstract: Based on the latest HTML5 standard, an algorithm visualization editor is designed and implemented, which can becanvas动画
used for dynamic demonstration and algorithm teaching. The design is based on the ocanvas based animation framework and algorithm animation library, and the definition and storage of script sequence based on timeline are designed. The editor controls the animation process through the animation framework, realizes the animation effect by calling the algorithm animation library, and enriches the method of algorithm teaching.
Key words: HTML5; algorithm; editor; JavaScript
作者简介：戴文鑫(1995—)，男，四川成都人，硕士研究生。研究方向：数据挖掘、算法可视化。
0 引言
在计算机技术中，算法具有抽象性和动态性，其思想难以理解。目前，国内大多数高校通过“教材+PPT ”的形式讲解算法的实现过程和原理[1]，初学者难以掌握算法的核心。算法的动画系统很多都需要插件，不便于普及，同时实现过程比较复杂，会花费较多的时间。与计算机专业课程相比可以发现，大部分专业课程都具有抽象难懂的特点。为了在算法教学方面取得一定的突破，让算法理解起来更形象，算法动画软件随之产生。
算法动画通过简单的图形来显示算法抽象的执行过程[2]，算法动画软件真正出现在20世纪80年代左右，比较著名的算法动画系统有BALSA [3-4]、BALSA-II [5]和Zeus [6]。这些教学软件最开始只有简单的一些操作，比如算法动画演示的暂停、分布播放等。到了20世纪90年代，Stasko J T 等设计实现了Tango [7]，它可以实现简单平化运动的运动效果，开发者可以快捷地创建动画。随着web 的迅速成长，基于web 的算法动画软件也变得越来越多，同时算法动画实现的功能也越
来越多，系统也变得更加完善。目前，对比国内外，算法动画的发展趋势有两个：一是趋向互联网方向发展，二是趋向可以交互编辑方向发展。但是如今算法动画系统中还存在一些问题，如系统中需要安装插件、不方便普及、时间花比较多、复杂的实现过程等，以及在可视化编辑这一部分功能相对比较薄弱，导致不易传播和二次编辑。
随着网络的发展，Canvas 标签成为HTML5中的重要部分，它通过使用脚本来绘制图形[8]。相比之下，用Flash 或其他插件，不仅浪费了资源，而且还会增加系统的烦琐性。将二维图形应用于关键帧，这样来实现图形在关键帧上的变形、淡入淡出、移位等方式，是构成2D 动画的基本方法，在视觉上人眼视觉暂留（根据光线强度不同，人眼视觉暂留时间在0.06～0.2秒）1秒12张以上的图片动画效果[9]。本文基于HTML5的特性，结合基于oCanvas 的动画框架的控制，调用算法的动态开发库，实现算法的可视化编辑器，使算法的动画创建变得更加简单、方便。同时，通过网站的形式进行展示，增强了算法动画的可视性。
— 64 —
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论