html5 如何绘制多行表格,一种基于HTML5Canvas的表格绘制方法和系统与流程

本发明属于双画布缓存技术领域，具体涉及一种基于HTML5 Canvas的表格绘制方法，本发明还涉及一种基于HTML5 Canvas的表格绘制系统。

背景技术：

当画布上内容众多，一旦表格因滚动，局部变更等行为驱动需要重新绘制时，重绘整个表格会带来大量的CPU占用，表现在用户场景中，会产生卡顿效果，极其影响用户体验。而本发明中描述的使用双画布缓存绘制的画法，会极大的提升绘制性能，降低CPU的占用，让表格的行为更加流畅自然，增强用户体验。

技术实现要素：

本发明的目的是提供一种基于HTML5 Canvas的表格绘制方法，解决了现有技术中存在的表格绘制占用CPU严重导致卡顿影响用户体验的问题。

本发明的另一目的是提供一种基于HTML5 Canvas的表格绘制系统。

本发明所采用的第一技术方案是，一种基于HTML5 Canvas的表格绘制方法，具体如下：

根据需要绘制的表格内容的特性，将表格绘制方法分为绘制主体图层和绘制装饰图层；

根据表格绘制过程中所用画布可见性，将画布分为缓存画布和主画布；

根据表格绘制状态，将表格绘制过程分为静态绘制过程和滚动行为绘制过程。

本发明的特点还在于，

将稳定且在行为过程中不易改变的数据绘制在缓存画布上，例如单元格样式、单元格内容、单元格边框、单元格图表信息，将上述操作称之为绘制主体图层；

将不稳定且在行为过程中经常改变的数据绘制在主画布上，例如选择边框、拖拽边框、剪贴边框、悬浮、高亮效果，将上述操作称之为装饰图层。

缓存画布是指用户不可见，在后台进行绘制的画布实例，所述主画布是指用户可见的，用来真实呈现表格所有内容的画布实例，缓存画布、主画布均为HTML5 Canvas画布实例。

静态绘制过程是指将主体图层绘制在缓存画布上，具体如下：

获取整个表格的大小尺寸及当前DPI，初始化缓存画布；

在缓存画布上绘制表格背景图层；

在缓存画布上绘制表格列头，行头及视图区域图层；

在缓存画布上绘制表格灰色区域图层；

在缓存画布上绘制表格边框及表格线图层；

当在缓存画布上绘制完毕之后，根据上下文的绘制区域限定，通过Canvas自有方法dragImage，将缓存画布作为参数直接交由主画布绘制；

然后在主画布上绘制装饰图层；

滚动行为绘制过程如下：

基于静态绘制过程的基础，当表格发生滚动，需要对新区域进行绘制，重置当前主画布区域；

根据滚动位移对缓存画布进行剪裁并平移；

将缓存画布平移内容绘制在主画布相应位置，即缓存画布向主画布刷新绘制；

通过前述将主体图层绘制在缓存画布，将缓存画布的新区域进行局部刷新绘制；

通过静态绘制过程，将缓存画布的新区域绘制在主画布相应位置；

在主画布上绘制装饰图层。

本发明所采用的第二技术方案是，一种基于HTML5 Canvas的表格绘制的系统，包括：

用于根据需要绘制的表格内容的特性，将表格绘制方法分为绘制主体图层和绘制装饰图层的装置；

用于根据表格绘制过程中所用画布可见性，将画布分为缓存画布和主画布的装置；

用于根据表格绘制状态，将表格绘制过程分为静态绘制过程和滚动行为绘制过程的装置；

用于判断数据是否稳定且在行为过程中不易改变的装置；

用于将单元格样式、单元格内容、单元格边框、单元格图表信息归类为绘制主体图层的装置；

用于将稳定且在行为过程中不易改变的数据绘制在缓存画布上的装置；

用于判断数据是否不稳定且在行为过程中经常改变的装置；

用于将选择边框、拖拽边框、剪贴边框、悬浮、高亮效果这些信息归类为装饰图层的装置；

用于将不稳定且在行为过程中经常改变的数据绘制在主画布上的装置；

用于将用户不可见，且在后台进行绘制的画布实例定义为缓存画布的装置；

用于将用户可见，且用来真实呈现表格所有内容的画布实例定义为主画布的装置；

用于获取整个表格的大小尺寸及当前DPI的装置；

用于初始化缓存画布的装置；

用于在缓存画布上绘制表格背景图层的装置；

用于在缓存画布上绘制表格列头，行头及视图区域图层的装置；

用于在缓存画布上绘制表格灰色区域图层的装置；

用于在缓存画布上绘制表格边框及表格线图层的装置；

用于当在缓存画布上绘制完毕之后，根据上下文的绘制区域限定，通过Canvas的图像拖拽dragImage属性,将缓存画布作为参数直接交由主画布绘制的装置；

用于在主画布上绘制装饰图层的装置；

用于当表格发生滚动，需要对新区域进行绘制，重置当前主画布区域的装置；

用于根据滚动位移对缓存画布进行剪裁并平移的装置；

用于将缓存画布平移内容绘制在主画布相应位置，即缓存画布向主画布刷新绘制的装置；

用于将缓存画布的新区域进行局部刷新绘制的装置；

用于将缓存画布的新区域绘制在主画布相应位置的装置；

用于在主画布上绘制装饰图层的装置。

本发明的有益效果是，一种基于HTML5 Canvas的表格绘制方法，通过双画布缓存的方式，定义缓存画布为用户不可见，在后台进行绘制的画布实例，主画布为用户可见的，用来真实呈现表格所有内容的画布实例，高效的完成对表格绘制，尤其体现在表格局部重新绘制及表格滚动绘制中。

附图说明

图1是本发明一种基于HTML5 Canvas的表格绘制方法中静态绘制过程各图层示意图；

图2是本发明一种基于HTML5 Canvas的表格绘制方法中主画布重置后的效果图；

图3是本发明一种基于HTML5 Canvas的表格绘制方法中缓存画布剪裁平移后的效果图；

图4是本发明一种基于HTML5 Canvas的表格绘制方法中缓存画布向主画布刷新绘制后的效果图；

图5是本发明一种基于HTML5 Canvas的表格绘制方法中缓存画布局部刷新绘制内容后的效果图；

图6是本发明一种基于HTML5 Canvas的表格绘制方法中主画布最终绘制结果效果图。

具体实施方式

下面结合附图和具体实施方式对本发明进行详细说明。

本发明一种基于HTML5 Canvas的表格绘制方法，其中涉及的所有画布均为HTML5 Canvas实例，具体如下：

根据需要绘制的表格内容的特性，将表格绘制方法分为绘制主体图层和绘制装饰图层；

根据表格绘制过程中所用画布可见性，将画布分为缓存画布和主画布；

根据表格绘制状态，将表格绘制过程分为静态绘制过程和滚动行为绘制过程。

其中，将稳定且在行为过程中不易改变的数据绘制在缓存画布上，例如单元格样式、单元格内容、单元格边框、单元格图表信息，将上述操作称之为绘制主体图层；

将不稳定且在行为过程中经常改变的数据绘制在主画布上，例如选择边框、拖拽边框、剪贴边框、悬浮、高亮效果，将上述操作称之为装饰图层。

缓存画布是指用户不可见，在后台进行绘制的画布实例，所述主画布是指用户可见的，用来真实呈现表格所有内容的画布实例，缓存画布、主画布均为HTML5 Canvas画布实例。

静态绘制过程是指将主体图层绘制在缓存画布上，具体如下：

获取整个表格的大小尺寸及当前DPI，初始化缓存画布；

在缓存画布上绘制表格背景图层；

在缓存画布上绘制表格列头，行头及视图区域图层；

在缓存画布上绘制表格灰色区域图层；

在缓存画布上绘制表格边框及表格线图层；

当在缓存画布上绘制完毕之后，根据上下文的绘制区域限定，通过Canvas自有方法dragImage，将缓存画布作为参数直接交由主画布绘制；

然后在主画布上绘制装饰图层；

滚动行为绘制过程如下：

基于静态绘制过程的基础，当表格发生滚动，需要对新区域进行绘制，重置当前主画布区域；

根据滚动位移对缓存画布进行剪裁并平移；

将缓存画布平移内容绘制在主画布相应位置，即缓存画布向主画布刷新绘制；

通过前述将主体图层绘制在缓存画布，将缓存画布的新区域进行局部刷新绘制；

通过静态绘制过程，将缓存画布的新区域绘制在主画布相应位置；

在主画布上绘制装饰图层。

基于HTML5 Canvas的表格绘制的系统，包括：

用于根据需要绘制的表格内容的特性，将表格绘制方法分为绘制主体图层和绘制装饰图层的装置；

用于根据表格绘制过程中所用画布可见性，将画布分为缓存画布和主画布的装置；

用于根据表格绘制状态，将表格绘制过程分为静态绘制过程和滚动行为绘制过程的装置；

用于判断数据是否稳定且在行为过程中不易改变的装置；

用于将单元格样式、单元格内容、单元格边框、单元格图表信息归类为绘制主体图层的装置；

用于将稳定且在行为过程中不易改变的数据绘制在缓存画布上的装置；

用于判断数据是否不稳定且在行为过程中经常改变的装置；

用于将选择边框、拖拽边框、剪贴边框、悬浮、高亮效果这些信息归类为装饰图层的装置；

用于将不稳定且在行为过程中经常改变的数据绘制在主画布上的装置；

用于将用户不可见，且在后台进行绘制的画布实例定义为缓存画布的装置；

用于将用户可见，且用来真实呈现表格所有内容的画布实例定义为主画布的装置；

用于获取整个表格的大小尺寸及当前DPI的装置；

用于初始化缓存画布的装置；

用于在缓存画布上绘制表格背景图层的装置；

用于在缓存画布上绘制表格列头，行头及视图区域图层的装置；

用于在缓存画布上绘制表格灰色区域图层的装置；

用于在缓存画布上绘制表格边框及表格线图层的装置；

用于当在缓存画布上绘制完毕之后，根据上下文的绘制区域限定，通过Canvas的图像拖拽dragImage属性,将缓存画布作为参数直接交由主画布绘制的装置；

用于在主画布上绘制装饰图层的装置；

用于当表格发生滚动，需要对新区域进行绘制，重置当前主画布区域的装置；

用于根据滚动位移对缓存画布进行剪裁并平移的装置；

用于将缓存画布平移内容绘制在主画布相应位置，即缓存画布向主画布刷新绘制的装置；

用于将缓存画布的新区域进行局部刷新绘制的装置；

用于将缓存画布的新区域绘制在主画布相应位置的装置；

用于在主画布上绘制装饰图层的装置。

实施例

静态绘制过程是指将主体图层绘制在缓存画布上，如图1所示：具体如下：

获取整个表格的大小尺寸及当前DPI，初始化缓存画布；

在缓存画布上绘制表格背景图层；

在缓存画布上绘制表格列头，行头及视图区域图层；

在缓存画布上绘制表格灰色区域图层；

在缓存画布上绘制表格边框及表格线图层；

当在缓存画布上绘制完毕之后，根据上下文的绘制区域限定，通过Canvas自有方法dragImage，将缓存画布作为参数直接交由主画布绘制；

然后在主画布上绘制装饰图层；

滚动行为绘制过程如下：

基于静态绘制过程的基础，当表格发生滚动，需要对新区域进行绘制，重置当前主画布区域，如图2所示；

根据滚动位移对缓存画布进行剪裁并平移，如图3所示；

将缓存画布平移内容绘制在主画布相应位置，即缓存画布向主画布刷新绘制，如图4所示；

通过前述将主体图层绘制在缓存画布，将缓存画布的新区域进行局部刷新绘制，如图5所示；

通过静态绘制过程，将缓存画布的新区域绘制在主画布相应位置，如图6所示；

在主画布上绘制装饰图层。