lucifinilhades
- 浏览: 87204 次
- 性别:
- 来自: 苏州
-
最新评论
-
liang3307：
好，我们也在使用html5，其中为了离线可以完全访问，把服务端 ...
HTML5 本地数据库
文章列表
绘制变形图形
坐标变换
绘制图形的时候，我们可能会想要旋转图形，或对图形使用变形处理，使用Canvas API的坐标轴变换处理功能，可以实现这种效果。
在计算机上绘制图形的时候，是以坐标单位为基准来进行图形绘制的。默认情况下，Canvas画布的最左上角对应于坐标轴原点(0, 0)。如果对这个坐标使用变换处理，就可以实现图形的变形处理了。对坐标的变换处理有三种方式：
平移
使用图形上下文对象的translate()方法移动坐标轴原点。该方法的定义如下：
context.translate(x, y);
该方法使用两个参数，x表示将坐标轴原点向左移动多少个单位，默认情况下为像素；y表示 ...
当浏览器首先连接到http://localhost:8080/faces/index.xhtml时，JSF实现初始化JSF代码并读取index.xhtml页面。这个页面包含诸如h:inputText等JSF标签。每个标签都有一个相关的标签处理程序类。当读取该页面时，执行相应的标签处理程序。JSF标签处理程序彼此协作来构建一棵组件树。
组件树是一种数据结构，其中包含JSF页面上所有用户界面元素的Java对象。例如UIInput对象分别对应于JSF文件中的h:inputText和h:inputSecret字段。
呈现页面
接着呈现HTML页面。除JSF标签外的所有文本直接显示。h:form、h ...
下图高度概括了JSF架构。可以看到，JSF框架负责与客户端设备交互，并提供将可视表示、应用程序逻辑和Web应用程序的业务逻辑相连接的工具。但是，JSF的作用域被限制在表示屋。数据库持久性、Web服务和其他后端连接都超出了J ...
JSF页面
当用户制作Facelets页面时，会将JSF标签添加到一个XHTML页面中。一个XHTML页面仅仅是是HTML页面，该页面同时也是符合标准的XML。我们为Facelets页面使用扩展名.xhtml。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
</html>
第二行声明了JSF HTML标签的h:前缀。JSF实现也定义了一个独立于HTML的核心标签集合。如果用户自己的页面中需要此 ...
UI元素状态伪类选择器
UI元素状态伪类选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。
选择器E:hover、E:active和E:focus
E:hover选择器用来指定当鼠标指针移动到元素上时元素所使用的样式；
E:active选择器用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式；
E:focus选择器用来指定元素获得光标焦点时使用的样式，主要是在文本框控件获得焦点并进行文字输入的时候使用。
<!DOCTYPE html>
<html>
<head>
<meta c ...
选择器概述
选择器是CSS3中一个重要的内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。在CSS3中，提倡使用选择器来将样式与元素直接
绑定真情为，这样，在样式表中什么样式与什么元素相匹配变得一目 ...
绘制渐变图形
渐变是指在填充时从一种颜色慢慢过渡到另外一种颜色。
绘制线性渐变
绘制线性渐变时，需要使用到LinearGradient对象。使用图形上下文对象的createLinearGradient()方法创建该对象。该方法的定义如下：
context.createLinearGradient(xStart, yStart, xEnd, yEnd);
该方法有四个参数，前两个参数指定渐变起始点的横坐标和纵坐标，后两个参数指定渐变终点的横坐标和纵坐标。通过使用该方法，创建了一个使用两个坐标点的LinearGradient对象。然后使用addColorStop()方法进行设定，该方法的定 ...
使用路径
绘制圆形
要想绘制其他图形，需要使用路径。同样的，绘制开始时还是要取得图形上下文，然后需要执行如下步骤：
开始创建路径；
创建图形的路径；
路径创建完成后，关闭路径；
设定绘制样式，调用绘制方法 ...
CSS3中的模块
模块名称
功能描述
Basic box model
定义各种与盒相关的样式。
Line
定义各种与直线相关的样式。
Lists
定义各种与列表相关的样式。
Hyperlink Presentation
定义各种与超链接相关的样式。譬如锚的显示方式、激活时的视觉效果等。
Presentation Levels
定义页面中元素的不同的样式级别。
Speech
定义各种与语音相关的样式。譬如音量、音速、说话间歇时间等属性。
Background and border
定义各种与背景和边框相关的样式。
Text
...
canvas元素基础
canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。canvas元素只是一块无色透明的区域。需要利用JavaScript编写在其中进行绘画的脚本。
在页面中放置canvas元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>canvas元素示例</title>
< ...
Geolocation API的基本知识
在HTML5中，为window.navigator对象新增了一个geolocation属性，可以使用Geolocation API来对该属性进行访问。window.navigator对象的geolocation属性存在三个方法。
取得当前地理位置
可以使用getCurrentPosition()方法来取得用户当前的地理位置信息，该方法的定义如下：
void getCurrentPosition(onSuccess, onError, options);
其中第一个参数为获取当前地理位置信息成功时所执行的回调函数，第二个参数为获取当前地理位置信息 ...
基础知识
Web Worker是在HTML5中新增的，用来在Web应用程序中实现后台处理的一项技术。使用这个API，用户可以很容易地创建在后台运行的线程（在HTML5中称为worker），如果将可能耗费较长时间的处理交给后台去执行，对用户在前台页面中执行的操作就完全没有影响了。
创建后台线程的步骤很简单。只要在Worker类的构造器中将需要在后台线程中执行的脚本文件的URL作为参数，然后创建Worker对象就可以了，例如：
var worker = new Worker("worker.js");
注意：在后台线程中是不能访问页面或窗口对象的。
如果在后台线程的 ...
基础介绍
Web Sockets是HTML5提供的在Web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。它实现了用HTTP不容易实现的服务器端的数据推送等智能通信技术。
使用Web Sockets API可以在服务器与客户端之间建立一个非HTTP的双向连接。这个连接是实时的，也是永久的，除非被显示关闭。这意味着当服务器想向客户端发送数据时，可以立即将数据推送到客户端的浏览器中，无须重新建立连接。只要客户端有一个被打开的socket（套接字）并且与服务器建立了连接，服务器就可以把数据推送到这个socket上，服务器不再需要轮询客户端的请求，从被动转为主动。
使用Web Socke ...
基本介绍
HTML5提供了在网页文档之间互相接收与发送信息的功能。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同源（域+端口号）的Web网页之间可以互相通信，甚至可以实现跨域通信。
要想授受从其他窗口发送来的信息，必须对窗口对象的message事件进行监听，代码如下：
window.addEventListener("message", function(event) {
// 处理程序代码
}, false);
使用window对象的postMessage()方法向其他窗口发送消息，该方法的定义如下：
otherwindow.postMessa ...
applicationCache对象
applicationCache对象代表本地缓存，可以用它来通知用户本地缓存中已经被更新，也允许用户手工更新本地缓存。在浏览器与服务器的交互过程中，当浏览器对本地缓存进行更新，将入新的资源文件时，会触发applicationCache对象的updateready事件，通知本地缓存已经被更新。可以利用该事件告诉用户本地缓存已经被更新，用户需要手工刷新页面来得到最新版本的应用程序，代表如下所示：
applicationCache.addEventListener("updateready", function(event) {
...