下面我们给大家介绍一下HTML5可视化UI特性吧!您将使用最新的 Web 技术开发 Web 应用程序。这里的大部分代码只是 HTML、JavaScript 和 CSS — 所有 Web 发人员的核心技术。所需的最重要的工具是用于进行测试的浏览器。本文大部分代码将在最新桌面浏览器上运行，但也有一些例外，我们将在文章中进行说明。当然，您也必须在移动浏览器上测试，为此，您需要最新的 iPhone 和 Android SDKs。本文将使用 iPhone SDK 3.1.3 和 Android SDK 2.1。参见 参考资料 获取链接。

通过 Canvas 实现图形效果

多年以来，Web 开发人员一直在抱怨 Canvas。现在，为何还有人会抱怨浏览器中的一个原生画图 API 呢?毕竟，它允许您创建某种图形界面，否则您将需要某种浏览器插件(每位移动 Web 开发人员都知道，插件在一些最流行的移动浏览器上并不可用)。Web 开发人员抱怨 Canvas 的原因是：尽管现在它可用于 Firefox 和 Safari 已经很多年，但最流行的桌面浏览器 Microsoft®Internet Explorer® 一直不支持它。甚至 Internet Explorer 9 的早期版本也不支持 Canvas。因此，多年来，Canvas 一直是最大的技术笑话。您可能会发现，这些令人惊叹的 Canvas 样例遍布整个 Internet，但您不能仅仅因为 Internet Explorer 不支持它就将它用于大多数 Web 应用程序。幸运的是，对于移动 Web 开发人员来说，Canvas 没有这样的限制。您瞄准的所有基于 Webkit 的浏览器都能实现 Canvas 并极大地优化其性能。

Canvas API 是一个低级画图 API，它支持创建直线、曲线、多边形和圆圈，并用彩色、渐变色等填充它们。在 Canvas 上，您可以创建文本，执行各种各样的几何转换。可以想见，这样的 API 的用途是无限的。我们来看一个使用 Canvas 来创建一个图形报告的应用程序。图 1 展示了该应用程序的屏幕截图：一个显示每年结果的柱状图。

图 1. 运行在 Android 浏览器上的基于 Canvas 的报告应用程序

图 1 所显示的并不是浏览器中的一幅静态图像。这个报告图形是使用这个 Canvas API 实时生成的。清单 1 展示了创建这个报告的 HTML。

清单 1. 报告 HTML

XML/HTML Code复制内容到剪贴板

maximum-scale=1.0; user-scalable=0;"/>

这个清单展示了基本的 HTML 结构。这个文档的主体拥有一个单一的 canvas 标记。在 init 函数(在文档主体加载时调用)中，您定义静态数据(报告数据)并将其传递到 graph 函数。尽管这里将报告定义为静态数据，但很容易将其想象为使用 Ajax 通过网络动态下载。report 函数包含所有有趣的代码，我们来看看 清单 2。

清单 2. graph 函数

JavaScript Code复制内容到剪贴板

function graph(report, maxWidth, maxHeight){

var data = report.values;

var canvas = document.getElementById("graph");

var axisBuffer = 20;

canvas.height = maxHeight + 100;

canvas.width = maxWidth;

var ctx = canvas.getContext("2d");

var width = 50;

var buffer = 20;

var i = 0;

var x = buffer + axisBuffer;

ctx.font = "bold 12px sans-serif";

ctx.textAlign = "start";

for (i=0;i

ctx.fillStyle = "rgba(0, 0, 200, 0.9)";

ctx.fillRect(x, maxHeight - (data[i][report.y] / 2),

width, (data[i][report.y] / 2));

ctx.fillStyle = "rgba(0, 0, 0, 0.9)";

ctx.fillText(data[i][report.x], x + (width / 4), maxHeight + 15);

x += width + buffer;

}

// draw the horizontal axis

ctx.moveTo(axisBuffer, maxHeight);

ctx.lineTo(axisBuffer+maxWidth, maxHeight);

ctx.strokeStyle = "black";

ctx.stroke();

// draw the vertical axis

ctx.moveTo(axisBuffer,0);

ctx.lineTo(axisBuffer,maxHeight);

ctx.stroke();

// draw gridlines

var lineSpacing = 50;

var numLines = maxHeight/lineSpacing;

var y = lineSpacing;

ctx.font = "10px sans-serif";

ctx.textBaseline = "middle";

for (i=0;i

ctx.strokeStyle = "rgba(0,0,0,0.25)";

ctx.moveTo(axisBuffer, y);

ctx.lineTo(axisBuffer + maxWidth,y);

ctx.stroke();

ctx.fillStyle = "rgba(0,0,0, 0.75)";

ctx.fillText(""+(2*(maxHeight -y)), 0, y);

y += lineSpacing;

}

}

在这个函数的第一部分中，您建立了创建这个报告需要的对象，比如画布的宽度和高度，填充变量等。您还创建了画布上下文对象，因为这是用于进行所有实际画图的对象。然后，您通过迭代报告数据，绘制 图 1 中的柱状图。首先，您设置 fillStyle 属性。这就像设置一个颜色一样简单，您使用 CSS 时也可能会这样做。在本例中，使用 rgba 标记来设置颜色，以及 alpha 值(这是颜色的透明度，稍后我们讨论 奇妙的 CSS3 世界 时还将介绍这个参数)。设置 fillStyle 属性后，使用 fillRect API 来为数据点创建柱状图。这里，您指定这个矩形的起点 (x,y) 以及它的高度和宽度。接下来，您重新定义 fillStyle，因为您想打印一些文本，作为报告的一部分。您使用 fillText API 来在画布上绘制文本。您对每个数据点都执行这个操作，为每个数据点创建一个柱状图，其下带有一个标签。

接下来，您需要绘制这个图形的其他部分 — 轴线和网格线。首先，绘制水平和垂直轴线。对于每条轴线，使用 moveTo API 来设置开始绘制直线的起始点。然后使用 lineTo API 来从这个起始点到传递到这个 lineTo 调用中的端点之间绘制一条直线。注意，这并不实际绘制一条直线;相反，您调用 stroke API 来绘制这条直线。绘制水平和垂直轴线后，沿着它们的标签绘制网格线，方法是均匀间隔它们，然后使用相同的 moveTo、lineTo 和 stroke 组合来绘制这些直线。

这就是以编程方式创建这个报告图形所需的所有代码。在这个示例中，您已经看到了许多最重要的、也是最常使用的画布 API，但还有其他几个 API(比如用于绘制曲线)。您可以使用这些 API 完成一些令人惊讶的任务，这些任务可以在任何基于 Webkit 的浏览器上完成。如果您的目标不是绘制图形，HTML 5 仍旧有很多格式为 Cascading Style Sheets (CSS) 3.0 的新视觉图像。

奇妙的 CSS3 世界

谈到 HTML 5，您可能会马上想到 HTML 标记。当然，HTML 5 肯定包含新标记，我们将在下一小节中查看其中的部分新标记。在上一小节中，您看到了如何使用一个

图 2. 移动设备的新 CSS 功能

图 2 在一个基于 Android 的设备和 iPhone 上展示了许多新 CSS 功能。左边的图像来自一个基于 Android 的设备。它比右边的图像更大，原因是它来自一个 Motorola Droid，它比用于右边的图像的 iPhone 3GS 拥有的分辨率更高的屏幕。因此，您在 Droid 上将看到更多的页面内容。但是，您可能会看到，标题 “The Gettysburg Address” 有一个倒影，该倒影在 iPhone 上逐渐淡出，但是在 Droid 上并不淡出，而是最终模糊下一个标题。这只是一个细节提醒：即使基于 Android 的设备和 iPhone 都拥有基于 Webkit 的浏览器，但它们之间也有细微的差别，因此您在测试时必须更加细心。现在看一下生成这个漂亮页面的代码(见 清单 3)，首先从页面顶端开始。

清单 3. 页面上半部分的代码

XML/HTML Code复制内容到剪贴板

header > h1{

color: yellow;

background: -webkit-gradient(linear, left top, left bottom,

from(blue), to(white))

}

tr:nth-child(4n+1) { color: navy; }

tr:nth-child(4n+2) { color: green; }

tr:nth-child(4n+3) { color: maroon; }

tr:nth-child(4n+4) { color: purple;