html5中word文件阅读,使用 HTML5 Canvas 进行数据可视化

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

一般而言，媒体肯定比以往更加重要，尽管 Web 上的媒体需求在过去 18 年中不断演变，但图像一直是静态的。Web 作者越来越希望能够在其网站和应用程序中使用动态媒体(例如音频、视频和交互式动画)，直到最近，主要的解决方案仍然是 Flash 或 Silverlight 之类的插件。

现在有了 HTML5，浏览器中的媒体元素大受青睐。您可能听说过新的 Audio 和 Video 标记，二者均允许这些类型的内容充当浏览器中的第一类对象，不需要任何插件。下个月的文章将深入介绍这两个元素及其 API。您可能还听说过 canvas 元素，它是一个绘图表面，包含一组丰富的 JavaScript API，这些 API 使您能够动态创建和操作图像及动画。IMG 对静态图形内容起到了哪些作用，canvas 就可能对可编写脚本的动态内容起到哪些作用。

尽管 canvas 元素令人兴奋，但它也面临一些认知问题。由于画布功能强大，它通常通过复杂动画或游戏来展示，尽管这些动画或游戏确实可以传达能够实现的功能，但它们也可能让您产生误解，认为画布使用起来非常复杂和困难，只应该尝试将其用于复杂情况(如动画或游戏)。

在本月的文章中，我将撇开画布华而不实的功能和复杂性，介绍它的一些简单的基本用法，目标是将画布定位为在 Web 应用程序中进行数据可视化的一个功能强大的选项。明确这一点后，我将重点讨论您如何开始使用画布，以及如何绘制简单的线条、形状和文本。然后，我将讨论您如何在形状中使用渐变，以及如何向画布中添加外部图像。最后，按照我在本系列中的一贯做法，我会简要探讨一下对较早版本浏览器的“填充代码”画布支持。

HTML5 Canvas 简介

根据 W3C HTML5 规范 (http://www.wendangwang.com/TR/html5/the-canvas-element.html)，canvas 元素“为脚本提供取决于分辨率的位图画布，该画布可用于动态呈现图形、游戏图形或其他可视图像。”Canvas 实际是在两个 W3C 规范中定义的。第一个规范是 HTML5 核心规范的一部分，其中详细定义了该元素本身。此规范介绍如何使用 canvas 元素、如何获取其绘图上下文、用于导出画布内容的 API 以及浏览器供应商的安全注意事项。第二个规范是 HTML Canvas 2D Context (http://www.wendangwang.com/TR/2dcontext)，我稍后再介绍该规范。

开始使用画布非常简单，只需在 HTML5 标记中添加 元素即可，如下所示：