| As a new element in the HTML5 standard,Canvas has a wide range of applications.Developers can use it to create an area in a browser's web page,and then use JavaScript to draw various content in this area.Appropriate use of the canvas element will greatly improve the interactivity and expressiveness of the application software.However,there are some obvious problems in the process of developing the canvas script.For example,the Canvas drawing API is relatively low-level,so developers often need to do some upper-level encapsulation work,and can not directly develop;when drawing animation through Canvas,developers need to care about the data model update and view update of the animation element at the same time;when developing the Canvas script The structure is confusing,the code segment duties are not clear,and so on.Therefore,in order to help developers improve their work efficiency,this paper proposes a front-end Canvas framework to solve the above problems.The main features of the framework include an out-of-the-box graphics base library,a responsive redraw mechanism,and the ability to allow developers to define content through template definitions.The out-of-the-box graphics base library enables developers to complete drawing tasks by declaring and combining.The responsive redrawing mechanism allows developers to maintain only the data model of the animated elements without having to manually update the canvas view,reducing the developer.The burden.The definition of the graphical component through the template terminates the"structure-style-behavior" hybrid development mode,which is conducive to rapid maintenance in the future.At the same time,in order to improve the rendering performance of the framework,strategies such as delayed rendering and layered rendering are adopted.This paper mainly discusses the design and implementation of the MVC-based Canvas framework.The framework is described in detail from the key technologies of the framework,the outline design of the framework,and the detailed design of the framework.In the test section,verify that the framework can meet the corresponding functions and quality.In the final part,the results of the framework are summarized and the areas to be upgraded are listed. |
