Research And Implementation Of Interactive Graphics Toolkit Based On HTML5 Canvas

With the development of ubiquitous computing technology,the traditional "point and click"interactive mode in HTML has not been able to meet the needs of today's personalized Web application and interactive diversity.Therefore,the newer HTML5 brings the Web front-end to a standardized application platform.With the Canvas element,it introduces the graphic interaction and the direct manipulation of interaction paradigm to Web application,which brings a better user experience while extending the information operation modes.However,since the design and implementation of the highly interactive Web graphic application is a highly knowledge-intensive behavior,and the Canvas platform has the following deficiencies:Firstly,the Canvas only provides low-level drawing primitives and fails to provide efficient technical supports for the development of interactive graphics;Secondly,it hasn't provided an effective and convenient event-handling mechanism on the level of graphic objects.Therefore,it requires that the developer not only needs to learn a variety of graphic drawing details,but also needs to control and manage interactive events on graphics,which makes the development of interactive graphics on the HTML5 Canvas more complicated.In order to solve the above problems,this paper proposes an interactive graphics toolkit based on the HTML5 Canvas,the toolkit is designed to provide designers with an efficient interactive graphical construction technology to improve the efficiency of development.This toolkit has the following characteristics:on the one hand,according to the idea of data-driven models,an interactive graphic markup language JIGML based on JSON is designed.The purpose is to specify interactive graphic objects and the relationship between them at a high level of abstraction,and enable the developer to draw interface graphics with no need for manually writing codes through the encapsulation of graphics drawing details,thus reducing the developer's learning curve.In order to realize this kind of interactive graphic markup language,the design and implementation of an interactive graphics library is necessary,which can also shorten the development cycle.On the other hand,on the level of graphic objects,the event conversion model and event-handling mechanism of interactive graphics are designed and implemented.It separates the graphic drawing from interactive event handling and simplifies the complexity of the interactive event handling.Finally,the feasibility and high efficiency of this toolkit system in developing interactive graphics are illustrated by an example of Tetris game.