基于HTML5canvas快速绘出柱状图的方法技术

本发明专利技术公开基于HTML5canvas快速绘出柱状图的方法，涉及web前端技术，使用HTML5中的canvas并引konva.js来绘出图形，包括如下步骤：1)引包，使用Konva，使用script标签导入需要使用的Konva库，2)在body里创建一个div用来显示图形，3)用js代码绘制图形。采用本发明专利技术，解决了图形文件加载慢的问题，利用HTML5 canvas绘出的图形要比echart fusionchsrts amcharts轻量，有效地降低了代码的冗余，降低了浏览器的解析压力从而图形可以高效快速的渲染到页面，有效地提高页面图形的加载效率。

Method of rapidly drawing histogram based on HTML5canvas

The invention discloses a method based on HTML5canvas fast draw histogram, involving web front-end technology, the use of HTML5 in canvas and konva.js to draw the graph, which comprises the following steps: 1) led package, using Konva, use the script tag into the need to use the Konva library, 2) to create a div in body is used to display graphics, 3 graphics rendering using JS code). The invention solves the problem of slow loading graphics file, using HTML5 canvas draw graphics than echart fusionchsrts amcharts light weight, effectively reduce the code redundancy, reduce the pressure of the browser to analytic graphics can render the page surface fast and efficiently and effectively improve the efficiency of loading page graphics.

【技术实现步骤摘要】
基于HTML5canvas快速绘出柱状图的方法
本专利技术涉及web前端技术，具体的说是基于HTML5canvas快速绘出柱状图的方法。
技术介绍
HTML5<canvas>标签用于绘制图像(通过脚本，通常是JavaScript)。<canvas>元素本身并没有绘制能力(它仅仅是图形的容器)-必须使用脚本来完成实际的绘图任务；getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。Konva是一个基于Canvas开发的2djs框架库,它可以轻松的实现桌面应用和移动应用中的图形交互效果。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包<scrirptsrc＝”js/konva.js”></scripy>。优选的，所述3)用js代码绘制图形：首先创建一个组，画底线，设置柱状图的最高高度，然后根据数组中的数据，设置每个柱状图所占的大小，并加文字，最后让柱状图动起来，得到group中的所有矩形，得到柱状图的原始高，得到柱状图的原始高。本专利技术所述基于HTML5canvas快速绘出柱状图的方法与现有技术相比具有的有益效果是：采用本专利技术，解决了图形文件加载慢的问题，HTML5的canvas画布属性是原生自带的不用引多余的js包，利用HTML5canvas绘出的图形要比echartfusionchsrtsamcharts轻量，有效地降低了代码的冗余和降低了浏览器的解析压力从而图形可以高效快速的渲染到页面，有效地提高页面图形的加载效率。具体实施方式为使本专利技术的目的、技术方案和优点更加清楚明白，以下结合具体实施例，对本专利技术所述基于HTML5canvas快速绘出柱状图的方法进一步详细说明。本专利技术提出基于HTML5canvas快速绘出柱状图的方法,使用HTML5中的canvas并引konva.js来绘出图形，包括如下步骤：1)引包，使用Konva，使用script标签导入需要使用的Konva库，2)在body里创建一个div用来显示图形，3)用js代码绘制图形。本专利技术有效地降低了代码的冗余，降低了浏览器的解析压力，从而使得图形可以高效快速的渲染到页面。实施例：本实施例所述基于HTML5canvas快速绘出柱状图的方法，其具体实施过程如下：1)引包：使用Konva，打开链接http://konvajs.github.io/,下载KonvaJS代码，使用script标签导入需要使用的Konva库；为了减少代码书写量可以在HTML中引canvas专属的konva.js包<scrirptsrc＝”js/konva.js”></scripy>；2)在body里创建一个div用来显示图形<divid＝"demo"></div>3)用js代码绘制图形这样即可完成一个简单的canvas图的开发。本实施例利用HTML5canvas并引konva.js来绘出的图形：颜色、样式和阴影线条样式属性描述lineCap设置或返回线条的结束端点样式lineJoin设置或返回两条线相交时，所创建的拐角类型lineWidth设置或返回当前的线条宽度miterLimit设置或返回最大斜接长度矩形方法描述rect()创建矩形fillRect()绘制“被填充”的矩形strokeRect()绘制矩形(无填充)clearRect()在给定的矩形内清除指定的像素路径转换方法描述scale()缩放当前绘图至更大或更小rotate()旋转当前绘图translate()重新映射画布上的(0，0)位置transform()替换绘图的当前转换矩阵setTransform()将当前转换重置为单位矩阵。然后运行transform()文本属性描述font设置或返回文本内容的当前字体属性textAlign设置或返回文本内容的当前对齐方式textBaseline设置或返回在绘制文本时使用的当前文本基线方法描述fillText()在画布上绘制“被填充的”文本strokeText()在画布上绘制文本(无填充)measureText()返回包含指定文本宽度的对象图像绘制方法描述drawImage()向画布上绘制图像、画布或视频像素操作合成其他方法描述save()保存当前环境的状态restore()返回之前保存过的路径状态和属性createEvent()getContext()toDataURL()上述具体实施方式仅是本专利技术的具体个案，本专利技术的专利保护范围包括但不限于上述具体实施方式，任何符合本专利技术的权利要求书的且任何所属
的普通技术人员对其所做的适当变化或替换，皆应落入本专利技术的专利保护范围。本文档来自技高网...

【技术保护点】
基于HTML5canvas快速绘出柱状图的方法，其特征在于,使用HTML5中的canvas并引konva.js来绘出图形，包括如下步骤：1)引包，使用Konva，使用script标签导入需要使用的Konva库，2)在body里创建一个div用来显示图形，3)用js代码绘制图形。

【技术特征摘要】
1.基于HTML5canvas快速绘出柱状图的方法，其特征在于,使用HTML5中的canvas并引konva.js来绘出图形，包括如下步骤：1)引包，使用Konva，使用script标签导入需要使用的Konva库，2)在body里创建一个div用来显示图形，3)用js代码绘制图形。2.根据权利要求1所述基于HTML5canvas快速绘出柱状图的方法，其特征在于,所述1)引包：使用Konva，打开链接http://konvajs.github.io/,下载KonvaJS代码，使用sc...

【专利技术属性】
技术研发人员：黄振豪，程林，杨培强，徐兵兵，
申请(专利权)人：山东浪潮商用系统有限公司，
类型：发明
国别省市：山东,37