使用 HTML5 Canvas 进行数据可视化

《使用 HTML5 Canvas 进行数据可视化》由会员分享，可在线阅读，更多相关《使用 HTML5 Canvas 进行数据可视化（15页珍藏版）》请在金锄头文库上搜索。

1、在网络时代的早期阶段，Web只不过是静态文本和链接的集合，人们越来越关注为其他类型的内容 提供支持。1993年，Mosaic浏览器（后来发展为Netscape Navigator）的创建者Marc Andreessen 提出将 IMG 标记作为在页面上的文本中嵌入图像的标准。此后不久， IMG 标记成为向网页中添加图 形资源的事实上的标准至今仍在使用这一标准。您甚至可以说，由于 Web 应用已经从 Web 文档 发展到 Web 应用程序，因此 IMG 标记比以往更加重要。一般而言，媒体肯定比以往更加重要，尽管 Web 上的媒体需求在过去 18 年中不断演变，但图像一 直是静态的。 Web 作者

2、越来越希望能够在其网站和应用程序中使用动态媒体（例如音频、视频和交 互式动画），直到最近，主要的解决方案仍然是 Flash 或 Silverlight 之类的插件。现在有了 HTML5，浏览器中的媒体元素大受青睐。您可能听说过新的Audio和Video标记，二者 均允许这些类型的内容充当浏览器中的第一类对象，不需要任何插件。下个月的文章将深入介绍这两 个元素及其API。您可能还听说过canvas元素，它是一个绘图表面，包含一组丰富的JavaScript API, 这些 API 使您能够动态创建和操作图像及动画。 IMG 对静态图形内容起到了哪些作用， canvas 就 可能对可编写脚本的动态内

3、容起到哪些作用。尽管 canvas 元素令人兴奋，但它也面临一些认知问题。由于画布功能强大，它通常通过复杂动画或 游戏来展示，尽管这些动画或游戏确实可以传达能够实现的功能，但它们也可能让您产生误解，认为 画布使用起来非常复杂和困难，只应该尝试将其用于复杂情况（如动画或游戏）。在本月的文章中，我将撇开画布华而不实的功能和复杂性，介绍它的一些简单的基本用法，目标是将 画布定位为在 Web 应用程序中进行数据可视化的一个功能强大的选项。明确这一点后，我将重点讨 论您如何开始使用画布，以及如何绘制简单的线条、形状和文本。然后，我将讨论您如何在形状中使 用渐变，以及如何向画布中添加外部图像。最后，按照我

4、在本系列中的一贯做法，我会简要探讨一下 对较早版本浏览器的“填充代码”画布支持。HTML5 Canvas 简介根据 W3C HTML5 规范 （w3.org/TR/html5/the-canvas-element.html）， canvas 元素“为脚本提供取 决于分辨率的位图画布，该画布可用于动态呈现图形、游戏图形或其他可视图像。 ”Canvas 实际是在 两个 W3C 规范中定义的。第一个规范是 HTML5 核心规范的一部分，其中详细定义了该元素本身。 此规范介绍如何使用 canvas 元素、如何获取其绘图上下文、用于导出画布内容的 API 以及浏览器 供应商的安全注意事项。第二个规范是H

5、TML Canvas 2D Context （w3.org/TR/2dcontext），我稍后再 介绍该规范。开始使用画布非常简单，只需在 HTML5 标记中添加 元素即可，如下所示：My Canvas Demo Q尽管现在我已经在DOM中包含canvas元素，但在页面上放置此标记不会产生任何效果，因为 在您添加内容之前，canvas元素中没有任何内容。这就是绘图上下文应运而生的原因。为了说明我 的空白画布所在的位置，我可以使用 CSS 设置其样式，因此我将在空白元素周围添加一条蓝色虚线。canvas border-width: 5px;border-style: dashed;border-

6、color: rgba(20, 126, 239, 0.50)在Internet Explorer 9+、Chrome、Firefox、Opera或Safari中打开我的页面时的结果如图1所示。图 1 已设置样式的空白 Canvas 元素使用画布时，您将在 JavaScript 中执行大多数工作，可通过 JavaScript 利用画布绘图上下文公开的 API 来操作图面的每个像素。要获取画布绘图上下文，您需要从 DOM 获得您的 canvas 元素，然 后调用该元素的 getContext 方法。var _canvas = document.getElementById(chart);var

7、_ctx = _canvas.getContext(2d);& GetContext返回一个对象，其中包含可用于在相关画布上绘图的API。该方法的第一个参数(在 本例中为2d)指定我们要用于画布的绘图API。2d指的是我之前提到的HTML Canvas 2D Context。您可能已经猜到，2D表示这是一个二维绘图上下文。到撰写本文时为止，2D Context是 唯一受到广泛支持的绘图上下文，我们将在本文中使用该上下文。围绕 3D 绘图上下文的工作和试 验正在进行当中，因此将来画布应该能够为我们的应用程序提供更多功能。绘制线条、形状和文本现在页面上已经有了 canvas 元素，并且我们已经在

8、JavaScript 中获取了其绘图上下文，我们可以 开始添加内容了。因为我想重点介绍数据可视化，所以我将使用画布绘制一个条形图来表示一个虚构 的体育用品商店当月的销售数据。本练习将需要为轴绘制轴线；为条绘制形状和填充；以及为每个轴 和条上的标签绘制文本。让我们从 x 和 y 轴的轴线开始。在画布上下文中绘制直线(或路径)分两个步骤进行。首先，使用 一系列 lineTo(x, y) 和 moveTo(x, y) 调用在图面上“描摹”直线。每种方法都会获取画布对象(从左上 角开始)上的x坐标和y坐标(而非屏幕本身上的坐标)以便在执行操作时使用。moveTo方法将 移至所指定的坐标，lineTo将

9、在当前坐标与您指定的坐标之间描摹一条直线。例如，以下代码将在图 面上描摹我们的 y 轴：/ Draw y axis._ctx.moveTo(110, 5);_ctx.lineTo(110, 375);&如果您向脚本中添加此代码并在浏览器中运行它，您会注意到什么也不会发生。因为这第一步只 是一个描摹步骤，并未在屏幕上绘制任何内容。描摹仅指示浏览器记录将在以后某个时刻刷新到屏幕 上的路径操作。当我准备好在屏幕上绘制路径时，我可以选择设置我的上下文的 strokeStyle 属性， 然后调用 stroke 方法，该方法将填充不可见线条。结果如图 2 所示。/ Define Style and str

10、oke lines._ctx.strokeStyle = #000;_ctx.stroke();图 2 画布上的一条直线因为定义线条(lineTo、moveTo)和绘制线条(stroke)是相对独立的，所以您实际可以批量处理一 系列 lineTo 和 moveTo 操作，然后将它们同时输出到屏幕上。我将通过此方法绘制 x 轴和 y 轴并 完成在每个轴的一端绘制箭头的操作。用于绘制轴的完整函数如图 3 所示，结果如图 4 所示。图 3 drawAxes 函数function drawAxes(baseX, baseY, chartWidth) var leftY, rightX;leftY =

11、5;rightX = baseX + chartWidth;/ Draw y axis._ctx.moveTo(baseX, leftY);_ctx.lineTo(baseX, baseY);/ Draw arrow for y axis._ctx.moveTo(baseX, leftY);_ctx.lineTo(baseX + 5, leftY + 5);_ctx.moveTo(baseX, leftY);_ctx.lineTo(baseX - 5, leftY + 5);/ Draw x axis._ctx.moveTo(baseX, baseY); _ctx.lineTo(rightX,

12、 baseY); / Draw arrow for x axis._ctx.moveTo(rightX, baseY);_ctx.lineTo(rightX - 5, baseY + 5); _ctx.moveTo(rightX, baseY);_ctx.lineTo(rightX - 5, baseY - 5); / Define style and stroke lines._ctx.strokeStyle = #000; _ctx.stroke();图 4 完成的 X 轴和 Y 轴绘制完两个轴之后，我们可能要为其添加标签使其更加有用。2D画布上下文指定用于向canvas元 素添加文本的A

13、PI，因此您不需要摆弄杂乱的操作，例如使文本在canvas元素上浮动。尽管如此， 画布文本并不提供方框模型，也不接受为页面范围的文本定义的 CSS 样式，等等。 API 提供与 CSS字体规则工作方式相同的字体属性(Attribute)一以及textAlign和textBaseline属性(Property),以 便您能够对相对于所提供的坐标的位置进行某种控制但除此之外，在画布上绘制文本实际上就是在 画布上为您所提供的文本选取一个确切的点。X 轴表示我们虚构的体育用品商店中的商品，所以我们应相应地为该轴添加标签：var height, widthOffset;height = _ctx.can

14、vas.height;widthOffset = _ctx.canvas.width/2;_ctx.font = bold 18px sans-serif;_ctx.fillText(Product, widthOffset, height - 20);在此代码段中，我将设置可选字体属性并提供一个要绘制在图面上的字符串，以及要用作字符串 起始位置的 x 坐标和 y 坐标。在此例中，我将在画布中间、底部上方 20 个像素的位置绘制 Product词，从而为我的条形图上的每种商品的标签留出空间。我将对y轴标签(包含每种商品 的销售数据)执行类似操作。结果如图 5 所示。图 5 包含文本的画布Uni

15、ts Sold(in 100s)现在我们已经有了图表框架，可以添加条了。让我们为条形图创建一些虚拟销售数据，我将其定义为对象文字的 JavaScript 数组。var salesData = category: Basketballs,sales: 150, category: Baseballs,sales: 125, category: Footballs,sales: 300;有了这些数据后，我们可以使用fillRect和fillStyle在图表上绘制条。fillRect(x, y, width, height) 将使用您指定的宽度和高度，在画布上的 x 和 y 坐标位置绘制一个矩形。 务必注意，除非您指定负宽度和高度值(在这种情况下，填充将按相反方向向外伸出)，否则 fi