这篇文章主要介绍“HTML5移动应用开发新的可视化UI特性怎么实现”，在日常操作中，相信很多人在HTML5移动应用开发新的可视化UI特性怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HTML5移动应用开发新的可视化UI特性怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
先决条件
在这里中，您将使用最新的Web技术开发Web应用程序。这里的大部分代码只是HTML，JavaScript和CSS —所有Web发人员的核心技术。所需的最重要的工具是用于进行测试的浏览器。此处大部分代码将在最新桌面浏览器上运行，但也有一些例外，我们将在文章中进行说明。当然，您也必须在移动浏览器上测试，从而，您需要最新的iPhone和Android SDK。
通过Canvas实现图形效果
多年以来，Web开发人员一直在重复画布上。现在，为什么还有人会重复浏览器中的一个原生画图API呢？然后，它允许您创建某种图形界面，否则您将需要某种浏览器插件（每Web开发人员抱怨Canvas的原因是：尽管现在它可用于Firefox和Safari已经很多年，但最流行的桌面浏览甚至Internet Explorer 9的早期版本也不支持Canvas。因此，多年来，Canvas一直是最大的技术笑话。您可能会发现，这些令人惊叹的Canvas样例多层整个Internet，但您不能仅仅因为Internet Explorer不支持它就将它用作其他大多数Web应用程序。幸运的是，对于移动Web开发人员来说，Canvas没有这样的限制。您瞄准的所有基于Webkit的浏览器都能实现Canvas并极大地优化其性能。
Canvas API是一个低级画图API，它支持创建直线，曲线，矩形和圆圈，并使用彩色，渐变色等填充它们。在Canvas上，您可以创建文本，执行多种的几何转换。可以想见，这样的API的用途是无限的。我们来看一个使用Canvas来创建一个图形报告的应用程序。图1展示了该应用程序的屏幕截图：一个显示每年结果的柱状图。
图1.运行在Android浏览器上的基于Canvas的报告应用程序
运行在Android浏览器上的基于Canvas的报告应用程序的屏幕截图
图1所显示的不是浏览器中的一幅静态图像。这个报告图形是使用这个Canvas API实时生成的。清单1展示了创建这个报告的HTML。
清单1.报告HTML
XML / HTML代码将内容复制到文本
最大比例= 1 .0; 用户可缩放= 0 ;“ />
HTML 5报告 title >
函数init（）{
var data = [{year：“ 2007”，sales：49}，
{year：“ 2008”，sales：131}，
{year：“ 2009”，sales：294}，
{year：“ 2010”，sales：405}]]；
var report = {x：“年”，
y：“销售”，
值：数据};
图表（report，350，300）;
}
脚本>
头>
canvas >
body >
html >
这个清单展示了基本的HTML结构。这个文档的主体拥有一个单一的canvas标记。在init函数（在文档主体加载时调用）中，您定义的静态数据（报告数据）将其传递到图形函数。这里将报告定义为静态数据，但很容易将其想象为使用Ajax通过网络动态下载。report函数包含所有有趣的代码，我们来看看清单2。
清单2. graph函数
JavaScript代码将内容复制到
函数 图（报告，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 =缓冲区+ axisBuffer;
ctx.font = “粗体12px sans-serif” ;
ctx.textAlign = “开始” ;
对于 （i = 0; i
ctx.fillStyle = “ rgba（ 0，0，200，0.9 ）” ;
ctx.fillRect（x，maxHeight-（data [i] [report.y] / 2），
宽度，（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 + =宽度+缓冲区;
}
//绘制水平轴
ctx.moveTo（axisBuffer，maxHeight）;
ctx.lineTo（axisBuffer + maxWidth，maxHeight）;
ctx.strokeStyle = “黑色” ;
ctx.stroke（）;
//绘制垂直轴
ctx.moveTo（axisBuffer，0）;
ctx.lineTo（axisBuffer，maxHeight）;
ctx.stroke（）;
//绘制网格线
var lineSpacing = 50;
var numLines = maxHeight / lineSpacing;
var y = lineSpacing;
ctx.font = “ 10px sans-serif” ;
ctx.textBaseline = “中间” ;
对于 （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来从这个。注意，这并不实际放置一条直线；相反，您调用描边API来替换这条直线。对齐水平和垂直上方后，放置它们的标签布局网格线，方法是均匀间隔本身，然后使用相同的moveTo，lineTo和stroke组合来绘制这些直线。
这就是以编程方式创建这个报告图形所需的所有代码。在这个示例中，您已经看到了很多最重要的，也是最常使用的画布API，但还有其他几个API（用作着色曲线） ）。您可以使用这些API完成一些令人震惊的任务，这些任务可以在任何基于Webkit的浏览器上完成。如果您的目标不是布局图形，HTML 5仍旧有很多格式为级联样式表（CSS）3.0的新视觉图像。
奇妙的CSS3世界
正确的HTML 5，您可能会马上想到HTML标记。当然，HTML 5肯定包含新标记，我们将在下一小节中查看其中的部分新标记。在上一小节中，您看到了如何使用一个
图2.移动设备的新CSS功能
比较Android和iPhone移动设备上的新CSS功能的屏幕截图
图2在一个基于Android的设备和iPhone上展示了许多新CSS功能。左边的图像来自一个基于Android的设备。它比右边的图像尺寸，原因是它来自一个Motorola Droid，它比对右边的图像的iPhone 3GS拥有的分辨率更高的屏幕。因此，您在Droid上将看到更多的页面内容。但是，您可能会看到，标题“葛底斯堡地址”有一个倒影，该倒影在iPhone这只是一个细节提醒：即使基于Android的设备和iPhone都拥有基于Webkit的浏览器，但它们之间也也有细微的差异，因此您在测试时必须更加细心。现在看一下生成这个漂亮页面的代码（见清单3），首先从页面顶端开始。
清单3.页面上半部分的代码
XML / HTML代码将内容复制到文本
函数$ {id）{
返回document.getElementById（id）;
}
函数init（）{
var i = 0 ;
var row = {};
var cell = {};
var topic = [“ nth-child”，“ gradients”，“ alpha”，“ text effect”，
“反思”，“变革”]；
对于（i = 0 ; i
行 = 文档.createElement（“ tr”）;
单元格 = 文档.createElement（“ td”）;
cell.appendChild（document.createTextNode（topics [i]））;
row.appendChild（cell）;
$（“ dtable”）。appendChild（row）;
}
}
脚本>
标头 > h2 {
颜色：黄色；
背景：-webkit-gradient（线性，左上，左下，
从（蓝色）到（白色））
}
tr：nth-child（4n + 1）{颜色：海军；}
tr：nth-child（4n + 2）{颜色：绿色；}
tr：nth-child（4n + 3）{颜色：栗色；}
tr：nth-child（4n + 4）{颜色：紫色；}
输入[ type = “ text” ] {
背景：rgba（150，30，30，0.5）;
}
style >
头>
CSS3的世界 h2 >
您的浏览器支持哪种CSS3？ div >
标头>
table >
您叫什么名字？标签>
输入>
旋转 button >
div >
body >
html >
清单3中的代码替换标题“ Gettysburg Address”上方的所有UI。您将稍后看到此页面的下半部分的代码。
首先应该检查页面标题。如果您查看清单3底部附近的HTML页面主体，您将看到这个标题实际上位于一个header标记中—这是HTML 5中一个一个新的HTML元素。
现在看看style元素（位于清单3中的HTML主体上方）。这个文本 的样式使用带有选择器标头> h2的CSS设置。此规则将文本颜色设置为黄色，同时将其背景设置为蓝色和白色。背景应用有梯度。这是您看到的前缀为-webkit的CSS特性的首个示例。您可能会出错，这个指向使这个CSS专为Webkit的浏览器。但是，在众多情况下，这些情况是CSS 3.0标准的一部分，但它们本身在这个标准中还在不断微小变化的部分。大量情况下，Webkit浏览器和基于Mozilla Firefox的浏览器都已经实现了这些特性。如果您的开发也需要针对Mozilla浏览器（Firefox的移动版本Fennec，该版本在欧洲的诺基亚智能手机上迅速流行起来），那么您通常可以将-webkit逐步更改为-moz。
如图2所示，当您显示该表的内容时，相邻两行的颜色各不相同。这个任务使用下一个CSS部分— tr：nth -child声明—来完成。可以在任意重复的元素上使用nth-child声明。您传递一个使用谓词的公式，检查它是否是一个有效的元素规则。在本例中，您声明表单行号为4n + 1（1、5、9，等等）的行的颜色为海军蓝，表单行号为4n + 2（2、6、10，等等）的行的颜色为绿色，以此类推，其余过去，您经常需要对表，列表等组件实现类似的视觉效果，但通常是通过繁琐的JavaScript来实现。
最后的视觉元素是红色的文本分支，带有标签 和文本按钮旋转。这个文本字段的红色是使用一个特定于类型的输入选择器实现的。换句话说，这是一个CSS规则，只适用于类型为text的输入元素。现在，您可能想知道Rotate Button到底作用何在？看看清单4中的代码就明白了，该代码调用一个称为rotate的函数。
清单4.使用CSS的JavaScript rotation函数
JavaScript代码将内容复制到
函数 rotate（）{
$（“ formSection” ）.style [ “ -webkit-transform” ] = “ rotateZ（-5deg）” ;
$（“ formSection” ）.style [ “ -webkit-transition” ] =
“ -webkit-transform 2s轻松输入输出” ；
$（“ rtBtn” ）. innerHTML = “撤消” ;
$（“ rtBtn” ）.onclick = function （）{
$（“ formSection” ）.style [ “ -webkit-transform” ] = “” ;
$（“ rtBtn” ）. innerHTML = “旋转” ;
$（“ rtBtn” ）. setAttribute （“ onclick” ， “ rotate（）” ）;
}
}
这个旋转函数使用JavaScript来更改应用到称为formSection的div的CSS。（注意：您正在将$（）使用document.getElementById（）的一个别名。）要旋转这个div，将它的-webkit-transform样式设置为rotateZ（-5deg），将其逆时针旋转5度。然后，将-webkit-transform样式设置为-webkit-transform 2s easy-in-out。这使旋转耗时两秒钟，缓慢启动，加速，然后在最后再次减速。在图3中，左边显示您叫什么名字？平行旋转之前的初始位置；右边显示该分支部分旋转后的视觉效果及其撤消按钮。
图3.旋转HTML元素
在一个移动设备上旋转HTML元素的屏幕截图
参见参考资料中的链接查看这个效果在Chrome，Safari 4和Opera等兼容HTML 5的浏览器上的实际运行情况。
现在我们转到图2中的页面的下半部分。这里您看到几个有趣的图像，文本效果以及布局示例。清单5显示了相关代码。
清单5.图2的下半部分代码
XML / HTML代码将内容复制到文本
h3 {
-webkit-text-fill-color：蓝色；
-webkit-text-stroke-color：黄色；
-webkit-text-stroke-width：1.5px;
背景：-webkit-gradient（radial，430 50，0，430 50，200，from（red），
到（＃000））;
-webkit-box-reflect：5px以下-webkit-gradient（线性，左上，左
底部，从（透明），色标（0.5，透明），到（白色））;
}
h4 {
颜色：rgba（0,0,255,0.75）;
背景：rgba（255,255,0,0.5）;
}
.xyz {
文字阴影：＃6374AB 4px -4px 2px;
空白：nowrap;
宽度：14em;
高度：2em；
溢出：隐藏；
文字溢出：省略号；
边框：1px实线#bbb;
border-radius：9px;
背景颜色：#fff;
}
.abc {
边框：1px实线＃000；
border-radius：9px;
-webkit-column-count：4;
-webkit-column-rule：1px solid＃a00;
-webkit-column-gap：0.75em;
}
style >
头>
葛底斯堡地址 h3 >
宾夕法尼亚州葛底斯堡，亚伯拉罕林肯。1863年11月19日 h4 >
四分制和七年前，我们的父亲在这方面提出了
大洲一个自由自由孕育并致力于
人人平等创造的主张。
div >
现在我们正在进行一场内战，测试是否
民族，或任何一个如此怀念，如此敬业的国家，
忍受。我们在那场战争的伟大战场上相遇。我们有
来奉献该领域的一部分，作为最后的休息
在这里献出生命的那个人那个国家可能
生活。我们应该这样做完全合适和适当。
div >
body >
html >
我们来逐个看看这个代码中的元素。首先，为“葛底斯堡演说”创建了一个标题，并以几种方式设置其样式。
使用-webkit-text-fill-color，-webkit-text-stroke-color和-webkit-text-stroke-width样式来创建“黄中带蓝”的效果。
通过设置背景样式-webkit-gradient来在文本后面放置一个红色黑色背景。注意，这是一个放射状排列，而导致您看到的是一个线性渐变。这两种在智能手机上的效果都很好。
通过设置-webkit-box-reflect样式对标题应用一个倒影。设置这个样式以在标题下方5个位置处反射标题，反向倒影应用一个渐变效果。这里的效果使倒影看起来好像正在淡出。如果回顾一下图2，您将看到，Android浏览器不支持这个对倒影应用一个渐变的组合：它只是呈现不带任何排序的倒影。
继续移动到下一个标题，对它应用一个非常简单的样式：文本一种颜色，背景另一种颜色。这两种颜色都使用rgba函数来指定“红-绿-蓝”值，以及一个alpha亮度值。值1.0完全不透明，值0.0则为透明。
清单5中的下一部分是此处短文的第一段。文本周围有一个边界，您使用新的border-radius样式来实现4个圆角。现在，您在网站上到处都能看到这样的圆角，它们通常使用图像来实现。与使用CSS 3.0来实现命名，这种方法真是太老土了。通过使用text-shadow样式来向这个这一文本的一个文本应用一个阴影。最后，注意区域受到了影响父div的高度和宽度的限制，文本太大了。与在一些较老的浏览器中看到的那样直接截取文本相反，通过设置text-overflow样式可以看到一个省略的省略号（…）效果。
最后，来到文本的最后部分。它的周围也有一个边界，但是注意，它出现在4个带有列分隔符的列中。变量，设置-webkit-column-count样式，并设置配套的- webkit-column-rule样式来获取这些分隔符。可以想见，如果没有这些新的CSS 3.0特性，像这样的格式化文本将会是多么的繁琐！当您创建简单的headers和footer（它们同时也是HTML 5中的新元素）时，这也可能是一个很有用的特性。看一下它们以及由HTML 5约会的其他一些新标记。
新语义
HTML 5向HTML标记添加了许多新元素。其中一些元素将导致引导浏览器提供一些新的呈现处理。其他一些元素将添加一些稍后可以通过JavaScript变得可用的额外特性。但是，另一些元素则不这些与，
看起来一样，并且拥有相同的编程接口。但是，它们将添加额外的语义含义。这些新语义针对页面的非视觉用户（这些新标记还向开发人员提供了一些链接，帮助他们编写表现力更强的CSS选择器。图4展示了包括使用屏幕阅读器这样的辅助技术的用户）和搜索引擎爬虫这样的计算机程序很重要。一个使用一些新语义元素的网页。
图4. iPhone上的一些新HTML 5元素
iPhone上的新HTML 5元素标题，导航，文章，部分以及一旁的屏幕截图
图4中的这个示例拥有一个header元素，几个nav元素，一个article元素，一个section元素以及以及一个side元素。这些元素不会导致任何特殊呈现。它们只是添加语义值，您可以使用它们来编写图4中显示的图片的代码如清单6所示。
清单6. HTML 5中的新语义元素
XML / HTML代码将内容复制到文本
最大比例= 1 .0; 用户可缩放= 0 ;“ />
获取最新标记 title >
头>
实际文档具有标题 h2 >
即使/p>
ctx.fillStyle = “ rgba（ 0，0，200，0.9 ）” ;
ctx.fillRect（x，maxHeight-（data [i] [report.y] / 2），
宽度，（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 + =宽度+缓冲区;
}
//绘制水平轴
ctx.moveTo（axisBuffer，maxHeight）;
ctx.lineTo（axisBuffer + maxWidth，maxHeight）;
ctx.strokeStyle = “黑色” ;
ctx.stroke（）;
//绘制垂直轴
ctx.moveTo（axisBuffer，0）;
ctx.lineTo（axisBuffer，maxHeight）;
ctx.stroke（）;
//绘制网格线
var lineSpacing = 50;
var numLines = maxHeight / lineSpacing;
var y = lineSpacing;
ctx.font = “ 10px sans-serif” ;
ctx.textBaseline = “中间” ;
对于 （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来从这个。注意，这并不实际放置一条直线；相反，您调用描边API来替换这条直线。对齐水平和垂直上方后，放置它们的标签布局网格线，方法是均匀间隔本身，然后使用相同的moveTo，lineTo和stroke组合来绘制这些直线。
这就是以编程方式创建这个报告图形所需的所有代码。在这个示例中，您已经看到了很多最重要的，也是最常使用的画布API，但还有其他几个API（用作着色曲线） ）。您可以使用这些API完成一些令人震惊的任务，这些任务可以在任何基于Webkit的浏览器上完成。如果您的目标不是布局图形，HTML 5仍旧有很多格式为级联样式表（CSS）3.0的新视觉图像。
奇妙的CSS3世界
正确的HTML 5，您可能会马上想到HTML标记。当然，HTML 5肯定包含新标记，我们将在下一小节中查看其中的部分新标记。在上一小节中，您看到了如何使用一个
图2.移动设备的新CSS功能
比较Android和iPhone移动设备上的新CSS功能的屏幕截图
图2在一个基于Android的设备和iPhone上展示了许多新CSS功能。左边的图像来自一个基于Android的设备。它比右边的图像尺寸，原因是它来自一个Motorola Droid，它比对右边的图像的iPhone 3GS拥有的分辨率更高的屏幕。因此，您在Droid上将看到更多的页面内容。但是，您可能会看到，标题“葛底斯堡地址”有一个倒影，该倒影在iPhone这只是一个细节提醒：即使基于Android的设备和iPhone都拥有基于Webkit的浏览器，但它们之间也也有细微的差异，因此您在测试时必须更加细心。现在看一下生成这个漂亮页面的代码（见清单3），首先从页面顶端开始。
清单3.页面上半部分的代码
XML / HTML代码将内容复制到文本
函数$ {id）{
返回document.getElementById（id）;
}
函数init（）{
var i = 0 ;
var row = {};
var cell = {};
var topic = [“ nth-child”，“ gradients”，“ alpha”，“ text effect”，
“反思”，“变革”]；
对于（i = 0 ; i
行 = 文档.createElement（“ tr”）;
单元格 = 文档.createElement（“ td”）;
cell.appendChild（document.createTextNode（topics [i]））;
row.appendChild（cell）;
$（“ dtable”）。appendChild（row）;
}
}
脚本>
标头 > h2 {
颜色：黄色；
背景：-webkit-gradient（线性，左上，左下，
从（蓝色）到（白色））
}
tr：nth-child（4n + 1）{颜色：海军；}
tr：nth-child（4n + 2）{颜色：绿色；}
tr：nth-child（4n + 3）{颜色：栗色；}
tr：nth-child（4n + 4）{颜色：紫色；}
输入[ type = “ text” ] {
背景：rgba（150，30，30，0.5）;
}
style >
头>
CSS3的世界 h2 >
您的浏览器支持哪种CSS3？ div >
标头>
table >
您叫什么名字？标签>
输入>
旋转 button >
div >
body >
html >
清单3中的代码替换标题“ Gettysburg Address”上方的所有UI。您将稍后看到此页面的下半部分的代码。
首先应该检查页面标题。如果您查看清单3底部附近的HTML页面主体，您将看到这个标题实际上位于一个header标记中—这是HTML 5中一个一个新的HTML元素。
现在看看style元素（位于清单3中的HTML主体上方）。这个文本 的样式使用带有选择器标头> h2的CSS设置。此规则将文本颜色设置为黄色，同时将其背景设置为蓝色和白色。背景应用有梯度。这是您看到的前缀为-webkit的CSS特性的首个示例。您可能会出错，这个指向使这个CSS专为Webkit的浏览器。但是，在众多情况下，这些情况是CSS 3.0标准的一部分，但它们本身在这个标准中还在不断微小变化的部分。大量情况下，Webkit浏览器和基于Mozilla Firefox的浏览器都已经实现了这些特性。如果您的开发也需要针对Mozilla浏览器（Firefox的移动版本Fennec，该版本在欧洲的诺基亚智能手机上迅速流行起来），那么您通常可以将-webkit逐步更改为-moz。
如图2所示，当您显示该表的内容时，相邻两行的颜色各不相同。这个任务使用下一个CSS部分— tr：nth -child声明—来完成。可以在任意重复的元素上使用nth-child声明。您传递一个使用谓词的公式，检查它是否是一个有效的元素规则。在本例中，您声明表单行号为4n + 1（1、5、9，等等）的行的颜色为海军蓝，表单行号为4n + 2（2、6、10，等等）的行的颜色为绿色，以此类推，其余过去，您经常需要对表，列表等组件实现类似的视觉效果，但通常是通过繁琐的JavaScript来实现。
最后的视觉元素是红色的文本分支，带有标签 和文本按钮旋转。这个文本字段的红色是使用一个特定于类型的输入选择器实现的。换句话说，这是一个CSS规则，只适用于类型为text的输入元素。现在，您可能想知道Rotate Button到底作用何在？看看清单4中的代码就明白了，该代码调用一个称为rotate的函数。
清单4.使用CSS的JavaScript rotation函数
JavaScript代码将内容复制到
函数 rotate（）{
$（“ formSection” ）.style [ “ -webkit-transform” ] = “ rotateZ（-5deg）” ;
$（“ formSection” ）.style [ “ -webkit-transition” ] =
“ -webkit-transform 2s轻松输入输出” ；
$（“ rtBtn” ）. innerHTML = “撤消” ;
$（“ rtBtn” ）.onclick = function （）{
$（“ formSection” ）.style [ “ -webkit-transform” ] = “” ;
$（“ rtBtn” ）. innerHTML = “旋转” ;
$（“ rtBtn” ）. setAttribute （“ onclick” ， “ rotate（）” ）;
}
}
这个旋转函数使用JavaScript来更改应用到称为formSection的div的CSS。（注意：您正在将$（）使用document.getElementById（）的一个别名。）要旋转这个div，将它的-webkit-transform样式设置为rotateZ（-5deg），将其逆时针旋转5度。然后，将-webkit-transform样式设置为-webkit-transform 2s easy-in-out。这使旋转耗时两秒钟，缓慢启动，加速，然后在最后再次减速。在图3中，左边显示您叫什么名字？平行旋转之前的初始位置；右边显示该分支部分旋转后的视觉效果及其撤消按钮。
图3.旋转HTML元素
在一个移动设备上旋转HTML元素的屏幕截图
参见参考资料中的链接查看这个效果在Chrome，Safari 4和Opera等兼容HTML 5的浏览器上的实际运行情况。
现在我们转到图2中的页面的下半部分。这里您看到几个有趣的图像，文本效果以及布局示例。清单5显示了相关代码。
清单5.图2的下半部分代码
XML / HTML代码将内容复制到文本
h3 {
-webkit-text-fill-color：蓝色；
-webkit-text-stroke-color：黄色；
-webkit-text-stroke-width：1.5px;
背景：-webkit-gradient（radial，430 50，0，430 50，200，from（red），
到（＃000））;
-webkit-box-reflect：5px以下-webkit-gradient（线性，左上，左
底部，从（透明），色标（0.5，透明），到（白色））;
}
h4 {
颜色：rgba（0,0,255,0.75）;
背景：rgba（255,255,0,0.5）;
}
.xyz {
文字阴影：＃6374AB 4px -4px 2px;
空白：nowrap;
宽度：14em;
高度：2em；
溢出：隐藏；
文字溢出：省略号；
边框：1px实线#bbb;
border-radius：9px;
背景颜色：#fff;
}
.abc {
边框：1px实线＃000；
border-radius：9px;
-webkit-column-count：4;
-webkit-column-rule：1px solid＃a00;
-webkit-column-gap：0.75em;
}
style >
头>
葛底斯堡地址 h3 >
宾夕法尼亚州葛底斯堡，亚伯拉罕林肯。1863年11月19日 h4 >
四分制和七年前，我们的父亲在这方面提出了
大洲一个自由自由孕育并致力于
人人平等创造的主张。
div >
现在我们正在进行一场内战，测试是否
民族，或任何一个如此怀念，如此敬业的国家，
忍受。我们在那场战争的伟大战场上相遇。我们有
来奉献该领域的一部分，作为最后的休息
在这里献出生命的那个人那个国家可能
生活。我们应该这样做完全合适和适当。
div >
body >
html >
我们来逐个看看这个代码中的元素。首先，为“葛底斯堡演说”创建了一个标题，并以几种方式设置其样式。
使用-webkit-text-fill-color，-webkit-text-stroke-color和-webkit-text-stroke-width样式来创建“黄中带蓝”的效果。
通过设置背景样式-webkit-gradient来在文本后面放置一个红色黑色背景。注意，这是一个放射状排列，而导致您看到的是一个线性渐变。这两种在智能手机上的效果都很好。
通过设置-webkit-box-reflect样式对标题应用一个倒影。设置这个样式以在标题下方5个位置处反射标题，反向倒影应用一个渐变效果。这里的效果使倒影看起来好像正在淡出。如果回顾一下图2，您将看到，Android浏览器不支持这个对倒影应用一个渐变的组合：它只是呈现不带任何排序的倒影。
继续移动到下一个标题，对它应用一个非常简单的样式：文本一种颜色，背景另一种颜色。这两种颜色都使用rgba函数来指定“红-绿-蓝”值，以及一个alpha亮度值。值1.0完全不透明，值0.0则为透明。
清单5中的下一部分是此处短文的第一段。文本周围有一个边界，您使用新的border-radius样式来实现4个圆角。现在，您在网站上到处都能看到这样的圆角，它们通常使用图像来实现。与使用CSS 3.0来实现命名，这种方法真是太老土了。通过使用text-shadow样式来向这个这一文本的一个文本应用一个阴影。最后，注意区域受到了影响父div的高度和宽度的限制，文本太大了。与在一些较老的浏览器中看到的那样直接截取文本相反，通过设置text-overflow样式可以看到一个省略的省略号（…）效果。
最后，来到文本的最后部分。它的周围也有一个边界，但是注意，它出现在4个带有列分隔符的列中。变量，设置-webkit-column-count样式，并设置配套的- webkit-column-rule样式来获取这些分隔符。可以想见，如果没有这些新的CSS 3.0特性，像这样的格式化文本将会是多么的繁琐！当您创建简单的headers和footer（它们同时也是HTML 5中的新元素）时，这也可能是一个很有用的特性。看一下它们以及由HTML 5约会的其他一些新标记。
新语义
HTML 5向HTML标记添加了许多新元素。其中一些元素将导致引导浏览器提供一些新的呈现处理。其他一些元素将添加一些稍后可以通过JavaScript变得可用的额外特性。但是，另一些元素则不这些与，
看起来一样，并且拥有相同的编程接口。但是，它们将添加额外的语义含义。这些新语义针对页面的非视觉用户（这些新标记还向开发人员提供了一些链接，帮助他们编写表现力更强的CSS选择器。图4展示了包括使用屏幕阅读器这样的辅助技术的用户）和搜索引擎爬虫这样的计算机程序很重要。一个使用一些新语义元素的网页。
图4. iPhone上的一些新HTML 5元素
iPhone上的新HTML 5元素标题，导航，文章，部分以及一旁的屏幕截图
图4中的这个示例拥有一个header元素，几个nav元素，一个article元素，一个section元素以及以及一个side元素。这些元素不会导致任何特殊呈现。它们只是添加语义值，您可以使用它们来编写图4中显示的图片的代码如清单6所示。
清单6. HTML 5中的新语义元素
XML / HTML代码将内容复制到文本
最大比例= 1 .0; 用户可缩放= 0 ;“ />
获取最新标记 title >
头>
实际文档具有标题 h2 >
即使/p>
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来从这个。注意，这并不实际放置一条直线；相反，您调用描边API来替换这条直线。对齐水平和垂直上方后，放置它们的标签布局网格线，方法是均匀间隔本身，然后使用相同的moveTo，lineTo和stroke组合来绘制这些直线。
这就是以编程方式创建这个报告图形所需的所有代码。在这个示例中，您已经看到了很多最重要的，也是最常使用的画布API，但还有其他几个API（用作着色曲线） ）。您可以使用这些API完成一些令人震惊的任务，这些任务可以在任何基于Webkit的浏览器上完成。如果您的目标不是布局图形，HTML 5仍旧有很多格式为级联样式表（CSS）3.0的新视觉图像。
奇妙的CSS3世界
正确的HTML 5，您可能会马上想到HTML标记。当然，HTML 5肯定包含新标记，我们将在下一小节中查看其中的部分新标记。在上一小节中，您看到了如何使用一个
图2.移动设备的新CSS功能
比较Android和iPhone移动设备上的新CSS功能的屏幕截图
图2在一个基于Android的设备和iPhone上展示了许多新CSS功能。左边的图像来自一个基于Android的设备。它比右边的图像尺寸，原因是它来自一个Motorola Droid，它比对右边的图像的iPhone 3GS拥有的分辨率更高的屏幕。因此，您在Droid上将看到更多的页面内容。但是，您可能会看到，标题“葛底斯堡地址”有一个倒影，该倒影在iPhone这只是一个细节提醒：即使基于Android的设备和iPhone都拥有基于Webkit的浏览器，但它们之间也也有细微的差异，因此您在测试时必须更加细心。现在看一下生成这个漂亮页面的代码（见清单3），首先从页面顶端开始。
清单3.页面上半部分的代码
XML / HTML代码将内容复制到文本
函数$ {id）{
返回document.getElementById（id）;
}
函数init（）{
var i = 0 ;
var row = {};
var cell = {};
var topic = [“ nth-child”，“ gradients”，“ alpha”，“ text effect”，
“反思”，“变革”]；
对于（i = 0 ; i
行 = 文档.createElement（“ tr”）;
单元格 = 文档.createElement（“ td”）;
cell.appendChild（document.createTextNode（topics [i]））;
row.appendChild（cell）;
$（“ dtable”）。appendChild（row）;
}
}
脚本>
标头 > h2 {
颜色：黄色；
背景：-webkit-gradient（线性，左上，左下，
从（蓝色）到（白色））
}
tr：nth-child（4n + 1）{颜色：海军；}
tr：nth-child（4n + 2）{颜色：绿色；}
tr：nth-child（4n + 3）{颜色：栗色；}
tr：nth-child（4n + 4）{颜色：紫色；}
输入[ type = “ text” ] {
背景：rgba（150，30，30，0.5）;
}
style >
头>
CSS3的世界 h2 >
您的浏览器支持哪种CSS3？ div >
标头>
table >
您叫什么名字？标签>
输入>
旋转 button >
div >
body >
html >
清单3中的代码替换标题“ Gettysburg Address”上方的所有UI。您将稍后看到此页面的下半部分的代码。
首先应该检查页面标题。如果您查看清单3底部附近的HTML页面主体，您将看到这个标题实际上位于一个header标记中—这是HTML 5中一个一个新的HTML元素。
现在看看style元素（位于清单3中的HTML主体上方）。这个文本 的样式使用带有选择器标头> h2的CSS设置。此规则将文本颜色设置为黄色，同时将其背景设置为蓝色和白色。背景应用有梯度。这是您看到的前缀为-webkit的CSS特性的首个示例。您可能会出错，这个指向使这个CSS专为Webkit的浏览器。但是，在众多情况下，这些情况是CSS 3.0标准的一部分，但它们本身在这个标准中还在不断微小变化的部分。大量情况下，Webkit浏览器和基于Mozilla Firefox的浏览器都已经实现了这些特性。如果您的开发也需要针对Mozilla浏览器（Firefox的移动版本Fennec，该版本在欧洲的诺基亚智能手机上迅速流行起来），那么您通常可以将-webkit逐步更改为-moz。
如图2所示，当您显示该表的内容时，相邻两行的颜色各不相同。这个任务使用下一个CSS部分— tr：nth -child声明—来完成。可以在任意重复的元素上使用nth-child声明。您传递一个使用谓词的公式，检查它是否是一个有效的元素规则。在本例中，您声明表单行号为4n + 1（1、5、9，等等）的行的颜色为海军蓝，表单行号为4n + 2（2、6、10，等等）的行的颜色为绿色，以此类推，其余过去，您经常需要对表，列表等组件实现类似的视觉效果，但通常是通过繁琐的JavaScript来实现。
最后的视觉元素是红色的文本分支，带有标签 和文本按钮旋转。这个文本字段的红色是使用一个特定于类型的输入选择器实现的。换句话说，这是一个CSS规则，只适用于类型为text的输入元素。现在，您可能想知道Rotate Button到底作用何在？看看清单4中的代码就明白了，该代码调用一个称为rotate的函数。
清单4.使用CSS的JavaScript rotation函数
JavaScript代码将内容复制到
函数 rotate（）{
$（“ formSection” ）.style [ “ -webkit-transform” ] = “ rotateZ（-5deg）” ;
$（“ formSection” ）.style [ “ -webkit-transition” ] =
“ -webkit-transform 2s轻松输入输出” ；
$（“ rtBtn” ）. innerHTML = “撤消” ;
$（“ rtBtn” ）.onclick = function （）{
$（“ formSection” ）.style [ “ -webkit-transform” ] = “” ;
$（“ rtBtn” ）. innerHTML = “旋转” ;
$（“ rtBtn” ）. setAttribute （“ onclick” ， “ rotate（）” ）;
}
}
这个旋转函数使用JavaScript来更改应用到称为formSection的div的CSS。（注意：您正在将$（）使用document.getElementById（）的一个别名。）要旋转这个div，将它的-webkit-transform样式设置为rotateZ（-5deg），将其逆时针旋转5度。然后，将-webkit-transform样式设置为-webkit-transform 2s easy-in-out。这使旋转耗时两秒钟，缓慢启动，加速，然后在最后再次减速。在图3中，左边显示您叫什么名字？平行旋转之前的初始位置；右边显示该分支部分旋转后的视觉效果及其撤消按钮。
图3.旋转HTML元素
在一个移动设备上旋转HTML元素的屏幕截图
参见参考资料中的链接查看这个效果在Chrome，Safari 4和Opera等兼容HTML 5的浏览器上的实际运行情况。
现在我们转到图2中的页面的下半部分。这里您看到几个有趣的图像，文本效果以及布局示例。清单5显示了相关代码。
清单5.图2的下半部分代码
XML / HTML代码将内容复制到文本
h3 {
-webkit-text-fill-color：蓝色；
-webkit-text-stroke-color：黄色；
-webkit-text-stroke-width：1.5px;
背景：-webkit-gradient（radial，430 50，0，430 50，200，from（red），
到（＃000））;
-webkit-box-reflect：5px以下-webkit-gradient（线性，左上，左
底部，从（透明），色标（0.5，透明），到（白色））;
}
h4 {
颜色：rgba（0,0,255,0.75）;
背景：rgba（255,255,0,0.5）;
}
.xyz {
文字阴影：＃6374AB 4px -4px 2px;
空白：nowrap;
宽度：14em;
高度：2em；
溢出：隐藏；
文字溢出：省略号；
边框：1px实线#bbb;
border-radius：9px;
背景颜色：#fff;
}
.abc {
边框：1px实线＃000；
border-radius：9px;
-webkit-column-count：4;
-webkit-column-rule：1px solid＃a00;
-webkit-column-gap：0.75em;
}
style >
头>
葛底斯堡地址 h3 >
宾夕法尼亚州葛底斯堡，亚伯拉罕林肯。1863年11月19日 h4 >
四分制和七年前，我们的父亲在这方面提出了
大洲一个自由自由孕育并致力于
人人平等创造的主张。
div >
现在我们正在进行一场内战，测试是否
民族，或任何一个如此怀念，如此敬业的国家，
忍受。我们在那场战争的伟大战场上相遇。我们有
来奉献该领域的一部分，作为最后的休息
在这里献出生命的那个人那个国家可能
生活。我们应该这样做完全合适和适当。
div >
body >
html >
我们来逐个看看这个代码中的元素。首先，为“葛底斯堡演说”创建了一个标题，并以几种方式设置其样式。
使用-webkit-text-fill-color，-webkit-text-stroke-color和-webkit-text-stroke-width样式来创建“黄中带蓝”的效果。
通过设置背景样式-webkit-gradient来在文本后面放置一个红色黑色背景。注意，这是一个放射状排列，而导致您看到的是一个线性渐变。这两种在智能手机上的效果都很好。
通过设置-webkit-box-reflect样式对标题应用一个倒影。设置这个样式以在标题下方5个位置处反射标题，反向倒影应用一个渐变效果。这里的效果使倒影看起来好像正在淡出。如果回顾一下图2，您将看到，Android浏览器不支持这个对倒影应用一个渐变的组合：它只是呈现不带任何排序的倒影。
继续移动到下一个标题，对它应用一个非常简单的样式：文本一种颜色，背景另一种颜色。这两种颜色都使用rgba函数来指定“红-绿-蓝”值，以及一个alpha亮度值。值1.0完全不透明，值0.0则为透明。
清单5中的下一部分是此处短文的第一段。文本周围有一个边界，您使用新的border-radius样式来实现4个圆角。现在，您在网站上到处都能看到这样的圆角，它们通常使用图像来实现。与使用CSS 3.0来实现命名，这种方法真是太老土了。通过使用text-shadow样式来向这个这一文本的一个文本应用一个阴影。最后，注意区域受到了影响父div的高度和宽度的限制，文本太大了。与在一些较老的浏览器中看到的那样直接截取文本相反，通过设置text-overflow样式可以看到一个省略的省略号（…）效果。
最后，来到文本的最后部分。它的周围也有一个边界，但是注意，它出现在4个带有列分隔符的列中。变量，设置-webkit-column-count样式，并设置配套的- webkit-column-rule样式来获取这些分隔符。可以想见，如果没有这些新的CSS 3.0特性，像这样的格式化文本将会是多么的繁琐！当您创建简单的headers和footer（它们同时也是HTML 5中的新元素）时，这也可能是一个很有用的特性。看一下它们以及由HTML 5约会的其他一些新标记。
新语义
HTML 5向HTML标记添加了许多新元素。其中一些元素将导致引导浏览器提供一些新的呈现处理。其他一些元素将添加一些稍后可以通过JavaScript变得可用的额外特性。但是，另一些元素则不这些与，
看起来一样，并且拥有相同的编程接口。但是，它们将添加额外的语义含义。这些新语义针对页面的非视觉用户（这些新标记还向开发人员提供了一些链接，帮助他们编写表现力更强的CSS选择器。图4展示了包括使用屏幕阅读器这样的辅助技术的用户）和搜索引擎爬虫这样的计算机程序很重要。一个免费云主机域名使用一些新语义元素的网页。
图4. iPhone上的一些新HTML 5元素
iPhone上的新HTML 5元素标题，导航，文章，部分以及一旁的屏幕截图
图4中的这个示例拥有一个header元素，几个nav元素，一个article元素，一个section元素以及以及一个side元素。这些元素不会导致任何特殊呈现。它们只是添加语义值，您可以使用它们来编写图4中显示的图片的代码如清单6所示。
清单6. HTML 5中的新语义元素
XML / HTML代码将内容复制到文本
最大比例= 1 .0; 用户可缩放= 0 ;“ />
获取最新标记 title >
头>
实际文档具有标题 h2 >
即使/p>
看起来一样，并且拥有相同的编程接口。但是，它们将添加额外的语义含义。这些新语义针对页面的非视觉用户（这些新标记还向开发人员提供了一些链接，帮助他们编写表现力更强的CSS选择器。图4展示了包括使用屏幕阅读器这样的辅助技术的用户）和搜索引擎爬虫这样的计算机程序很重要。一个使用一些新语义元素的网页。
图4. iPhone上的一些新HTML 5元素
iPhone上的新HTML 5元素标题，导航，文章，部分以及一旁的屏幕截图
图4中的这个示例拥有一个header元素，几个nav元素，一个article元素，一个section元素以及以及一个side元素。这些元素不会导致任何特殊呈现。它们只是添加语义值，您可以使用它们来编写图4中显示的图片的代码如清单6所示。
清单6. HTML 5中的新语义元素
XML / HTML代码将内容复制到文本
最大比例= 1 .0; 用户可缩放= 0 ;“ />
获取最新标记 title >
头>
实际文档具有标题 h2 >
即使/p>
本文小编为大家详细介绍“Java的五种运算符怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“Java的五种运算符怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。算术运算符的符号通常为:加(+)、减(-)、乘(*)、除(…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
