首页 » 读书笔记 » HTML5高级编程

第1章 HTML5概述

1993年HTML首次以Internet草案的形式发布。20世纪90年代发布了2.0,3.2,4.0,再到1999年的4.01版本。2004年,WHATWG创立了HTML5规范,W3C于2006年重新介入HTML,并于2009年停止XHTML2的工作。

Web浏览器的Javascript引擎

浏览器 引擎名称
Apple Safari Nitro(又称Squirrel Fish Extreme)
Google Chrome V8
MS IE9 Chakra
Mozilla Firefox JagerMonkey
Opera Carakan

HTML5新片段类元素

元素 说明
header 标记头部区域的内容(页面,或页面的一块区域)
footer 标记尾部区域的内容(页面,或页面的一块区域)
section Web页面中的一块区域
article 独立的文章内容
aside 相关内容或索引
nav 导航类辅助内容

http://www.html5test.com 直接显示用户浏览器对HTML5的支持情况。

http://www.caniuse.com 按浏览器的版本提供了详尽的HTML5支持情况。

第2章 Canvas API

Canvas的概念最初是Apple提出的。在Canvas出现之前,使用绘图API,只能用Adobe的Flash和SVG(Scalable Vector Graphics,可伸缩矢量图形)插件,或IE支持的VML(Vector Markup Language,矢量标记语言),一起古怪的Javascript技巧。

Canvas本质上是一个位图画布,其上绘制的图形是不可伸缩的,不能像SVG那样放大缩小。用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间。SVG却可以在不同分辨率下流畅缩放,并支持点击检测。

在页面上使用canvas元素时,会创建一块矩形区域,之后可以通过Javascript来控制它。

Canvas中的坐标从左上角开始,坐标为(0,0),x轴沿水平方向向右延伸,y轴沿垂直方向向下延伸。

Canvas简单使用

在HTML页面中加入canvas元素,如:

<canvas id="diagonal"></canvas>

在Javascript中加入对canvas控制代码。

首先获取canvas元素,并创建上下文对象:

var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');

之后的操作,都通过上下文对象来控制(即上段代码的context):

context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
context.stroke();

beginPath()表示绘制线。

moveTo()把坐标移到指定点(起点)。

lineTo()终点。

stroke()执行绘制(stroke在英文中有画笔的意思)。

代码见这里

Canvas API

translate(x, y)
把(x,y)作为原点坐标,以后的坐标偏移都是基于这个设定的原点的。

第3章 HTML5 Audio和Video

WebM

2010年5月,Google发布了WebM视频格式,WebM的后缀是.webm,是基于Matroska修改的封装格式,视频使用VP8编码,音频使用Ogg Vorbis编码。

第4章 Geolocation API

HTML5 Geolocation API(HTML5 地理定位API)。

HTML5 Geolocation位置信息的来源:纬度、经度和其他特性,获取这些数据的途径:GPS、Wifi和蜂窝站点。

HTML5地理定位功能的底层设备:笔记本电脑或手机提供给浏览器的。

经纬度坐标可以用以下两种方式表示:

  1. 十进制格式
  2. DMS(Degree Minute Second),角度格式。

除了经纬度,HTML5 Geolocation还提供位置坐标的准确度。以及其他一些元数据(取决于浏览器所在的硬件设备),如海拔、海拔准确度、行驶方向和速度等。如果这些元数据不存在则返回null。设备可能使用的数据源:

  • IP地址。
  • 三维坐标
    • GPS(Global Positioning System,全球定位系统)
    • 从RFID、Wi-Fi和蓝牙到Wi-Fi的MAC地址
    • GSM或CDMA手机的ID
  • 用户自定义数据

基于IP定位,检索其注册的物理地址,如果用户的IP是ISP提供的,其地址往往就由服务提供商的物理地址定。

GPS定位是通过收集运行在地球周围的多个GPS卫星的信号实现的。但GPS定位时间可能较长,因此不适合需要快速响应的应用程序。实现,最好用异步方式获取。GPS在室内效果不好,用户耗电量较大。

Wi-Fi定位是通过三角距离计算出来的。这个三角距离指的是用户当前位置到已知的多个Wi-Fi接入点的距离。不同于GPS,Wi-Fi在室内也非常准确。缺点是在乡村这些无线接入点较少的地方效果不好。

核心API

HTML5 Geolocation核心API是

void getCurrentPosition(position_callback_success [, position_callback_error] [, position_options])

通过HTML5 Geolocation获取地理信息的代码

测试浏览器是否支持HTML5 Geolocation:

function test_geolocation()
{
    if(navigator.geolocation) {
        document.getElementById("support").innerHTML = "support";
    } else {
        document.getElementById("support").innerHTML = "not support";
    }
}

获取地理位置信息的代码:

function update_location(position)
{
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;
    var accuracy  = position.coords.accuracy;
    document.getElementById("latitude").innerHTML = latitude;
    document.getElementById("longitude").innerHTML = longitude;
    document.getElementById("accuracy").innerHTML = accuracy;
}
function show_location()
{
    navigator.geolocation.getCurrentPosition(update_location, null, {timeout:10000});
}
window.addEventListener("load", show_location, true);

运行程序(在笔记本上运行Firefox)的输出如(浏览器会发出隐私提示): 39.9459387, 116.3556725, 32

对比MaxMind的输出(通过这里获取): Latitude/Longitude 39.9289/116.3883

接下来,再用Google Maps,通过经纬度获取地理信息描述,通过HTTP GET请求即可: http://maps.google.com/maps/geo?output=xml&q=39.9459387,116.3556725

可见HTML5 Geolocation获取地理信息还是很准确。

完整代码见这里

分享

0