基于 HTML5 的油田地质图形数据可视化方法研究
本论文研究的目的是使用 HTML5 原生接口，在 Canvas API 基础上设计一套测井曲线、综合录井图、栅状图及油藏剖面图等地质图形可视化前端组件，通过与 WebAPI 数据服务接口相结合，使开发人员用最少的开发代价实现油田地质图形的前端交互可视化展示，解决以往需要下载安装控件、难以跨平台、跨浏览器、存在不安全隐患以及在信息统计分析和交互能力上存在明显的缺陷等问题。
HTML5 作为 Web 前端开发的新标准超文本标记语言，为开放 Web 平台及跨平台的 Web 应用提供了强有力的技术支持。它具有本地存储、图形绘制、离线应用、地理坐标定位、图像处理等特性。HTML5 主要有 2 个 2D 图形技术，即 Canvas 和 SVG。Canvas 是用 JavaScript 操作动态生成，SVG 则是使用 XML 静态描述生成，Canvas 是基于位图，图片放大会影响到显示的效果，SVG 是基于矢量图，图形放大不会影响到显示效果。
Canvas 绘图技术是基于浏览器中的画布，也是一个带有绘图 API 的图像元素，能表示一个在页面上即时渲染的位图区域，它本身没有绘图能力，只是通过 JavaScript 调用 Canvas API 就能方便的在 Web 页面上进行图形的绘制和处理，提供了大量图形绘制函数，能够完成任何图形的绘制，还可以进行大量数据的复杂图形的在线绘制。
Canvas 还有更吸引人的地方，一是交互能力方面，在 Canvas 之前，基于 B/S 的客户端绘图很难实现，虽然简单的绘图可以通过 JQuery、JavaScript 等脚本来完成，但是交互复杂的绘图操作就需要借助第三方插件来实现。Canvas 可以有效地解决复杂交互图形绘制的问题，非常适合于如测井曲线道、线的选择、填充、拖动、增删等操作，在 Web 页面上创建完整的应用程序。
二是 Canvas 图形绘制的 JavaScript 脚本代码是能够被压缩和缓存，这样可以大幅度地减少带宽的占用。三是 Canvas 是基于像素级的即时模式图形系统，绘制完成后不保存对象到内存中，这样使用 Canvas 就可以获得快速的绘图速度，用户体验会比较好。
图形元素封装基于 HTML5 的数据可视化的方法是基于数据驱动，采用 HTML5 提供的 API 借助浏览器的支持，在客户端实现的绘图的可视化技术。数据驱动依靠服务器端提供数据，依靠 WebAPI 接口，向浏览器传输数据，数据的传输格式为 Json，采用 Http 协议使用 POST 方式与服务器端通讯。
浏览器收到服务器端数据使用 Canvas 元素和 JavaScript 在网页上绘制测井综合、录井综合、油藏剖面等图形，并与前端 UI 框架共享一个组件管理器，方便组件之间的通讯并进行交互操作。由于图形绘制是基于浏览器方式，所以这种方法可以跨平台使用，对于智能手机和平板电脑，只要系统里安装支持 Canvas 浏览器就可以绘制图形。
Canvas 基础绘图 API 封装在 Canvas 提供的图形绘制接口的基础上，通过对原生绘图方法的封装，为以后地质图形绘制打好基础。这项基础绘图类还可以使用 ZRender、KineticJs 等图形类库来完成，ZRender 是轻量级 Canvas 类库，ZRender 提供涵括了几乎所有 Canvas 方法并对它们进行了良好的封装，并提供简单易用的接口，让开发者轻而易举的实现自己想要的图形效果，比如直接使用 Canvas 去画贝塞尔曲线比较繁琐，使用 ZRender.js 时只需提供画布的两个对角线为起止点坐标，同时配置绘图画线颜色 stroke 和线宽度 lineWidth，就可以创建一条贝塞尔曲线。
