[发明专利]基于HTML5canvas快速绘出柱状图的方法

说明书

技术领域

本发明涉及web前端技术，具体的说是基于HTML5 canvas快速绘出柱状图的方法。

背景技术

HTML5<canvas>标签用于绘制图像(通过脚本，通常是JavaScript)。<canvas>元素本身并没有绘制能力(它仅仅是图形的容器)-必须使用脚本来完成实际的绘图任务；getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

Konva是一个基于Canvas开发的2d js框架库,它可以轻松的实现桌面应用和移动应用中的图形交互效果。Konva可以高效的实现动画,变换,节点嵌套,局部操作,滤镜,缓存,事件等功能,不仅仅适用于桌面与移动开发,还有更为广泛的应用。Konva允许在舞台上绘图,添加事件监听,移动或缩放某个图形,独立旋转,以及高效的动画，即使应用中含有数千个图形也是可以轻松实现的。

KonvaJS：任何图形都存在于舞台中(Konva.Stage)，这个舞台中又可以包多个用户层(Konva.Layer)。每一个层中都含有两个<canvas>着色器:一个前台渲染器,一个后台渲染器。前台渲染器是可以看见的部分,而后台渲染器是一个隐藏的canvas.后台渲染器为了提高效率实现事件监听的工作。每一个层可以包含形状(Shape),形状的组(Group),甚至是由组组成的组。舞台,层,组,以及形状都是虚拟的节点(node)。所有的节点都可以设置样式与变化，即使Konva可以重新渲染形状,例如:矩形,圆形,图片,精灵,文本,线段,多边形,正多边形,路径,和星星等。并且，开发者可以根据Shape类的模板自定义自己的图形,然后重写draw方法。只要拥有了舞台(Stage),并且上面放置了层(Layer)和图形(Shape),那么就可以为他添加事件监听,变换节点,运行动画,使用路径,甚至是更多的效果。

发明内容

本发明针对目前技术发展的需求和不足之处，提供基于HTML5canvas快速绘出柱状图的方法。

本发明所述基于HTML5canvas快速绘出柱状图的方法，解决上述技术问题采用的技术方案如下：所述基于HTML5canvas快速绘出柱状图的方法，使用HTML5中的canvas并引konva.js来绘出图形，包括如下步骤：1)引包，使用Konva，使用script标签导入需要使用的Konva库，2)在body里创建一个div用来显示图形，3)用js代码绘制图形。

优选的，所述1)引包：使用Konva，打开链接http://konvajs.github.io/,下载KonvaJS代码，使用script标签导入需要使用的Konva库；在HTML中引canvas专属的konva.js包<scrirpt src＝”js/konva.js”></scripy>。

优选的，所述3)用js代码绘制图形：首先创建一个组，画底线，设置柱状图的最高高度，然后根据数组中的数据，设置每个柱状图所占的大小，并加文字，最后让柱状图动起来，得到group中的所有矩形，得到柱状图的原始高，得到柱状图的原始高。

本发明所述基于HTML5 canvas快速绘出柱状图的方法与现有技术相比具有的有益效果是：采用本发明，解决了图形文件加载慢的问题，HTML5的canvas画布属性是原生自带的不用引多余的js包，利用HTML5canvas绘出的图形要比echart fusionchsrts amcharts轻量，有效地降低了代码的冗余和降低了浏览器的解析压力从而图形可以高效快速的渲染到页面，有效地提高页面图形的加载效率。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，对本发明所述基于HTML5canvas快速绘出柱状图的方法进一步详细说明。

本发明提出基于HTML5canvas快速绘出柱状图的方法,使用HTML5中的canvas并引konva.js来绘出图形，包括如下步骤：1)引包，使用Konva，使用script标签导入需要使用的Konva库，2)在body里创建一个div用来显示图形，3)用js代码绘制图形。本发明有效地降低了代码的冗余，降低了浏览器的解析压力，从而使得图形可以高效快速的渲染到页面。

实施例：