随着无处不在计算技术的深入发展,HTML中传统的简单“点和击”交互方式已经不能够满足今天Web应用个性化和交互多样性的需求。因此,新标准HTML5将Web前端带入一个标准化的应用平台,通过Canvas元素将图形交互与直接操作的交互范式引入到Web应用中,扩充信息操作方式的同时,并带来更好的用户体验。然而,由于设计并实现高度交互的Web图形应用是一个高度知识密集型行为[1],目前的Canvas平台存在以下不足:首先,Canvas仅提供低级的绘图原语,并没有给交互式图形的开发提供高效的技术支持;其次,该平台尚未在图形对象层次上提供有效方便的事件处理机制。因此,这就要求开发者不仅需要学习各种图形绘制细节,还需控制和管理作用在图形上的交互事件,这使得HTML5 Canvas上交互式图形开发变得复杂繁琐。针对上述问题,本文提出一个基于HTML5 Canvas的交互式图形工具箱,旨在为设计者提供一种高效的交互式图形构建技术,提高开发效率。该工具箱具有以下特征:一方面,根据数据驱动模型思想,设计了一种基于JSON的交互式图形标记语言JIGML,旨在一个高级抽象层次上指定交互式图形对象及它们之间的关系,通过对图形绘制细节进行封装,使得开发者不需要手动编写代码就能实现界面图形的绘制,从而降低了开发者的学习曲线。为了实现这种交互式图形标记语言,设计并实现一个交互式图形库,进而可以缩短开发周期;另一方面,在图形对象层次上,设计并实现交互式图形的事件转化机制以及事件处理机制,将图形绘制与交互事件处理相分离,从而简化了交互事件处理的复杂性。最后,通过一个Tetris游戏实例说明该工具箱系统在开发交互式图形的可行性以及高效性。