HTML5 API 中篇

14-2 Geolocation （扩展内容）

HTML5 Geolocation API是H TML5新增的地理位置应用程序接口，它提供了一个可以准确感知浏览器用户当前位置的方法。如果浏览器支持，且设备具有定位功能，就能够直接使用这组API来获取当前位置的信息。该Geolocation API可以应用于移动设备中的地理定位。允许用户在Web应用程序中共享位置信息，使其能够享受位置感知的服务。

HTML5的Geolocation API的使用方法也非常简单。请求一个位置信息，如果用户同意，浏览器就会返回相应的位置信息，该位置信息是通过支持H TML5地理定位功能的底层设备来提供的，例如笔记本电脑或者手机。位置信息由纬度，经度坐标和一些其他元数据组成。有了这些位置信息我们就可以构建位置感知类的应用程序。

14-2-1为什么要学习Geolocation

设想这样一个场景：有一个Web应用程序，它可以向用户提供附近不远处某商店运动鞋的打折优惠信息。使用H TML5 Geolocation API，就可以请求其他用户共享他们的位置，如果他们同意，应用程序就可以提供相关信息，告诉用户去附近哪家商店可以挑选到打折的鞋子。

HTML5 Geolocatio n技术另一个应用场景就是构建计算行走（跑步）路程的应用程序。我们可以在开始跑步时通过手机浏览器启动应用程序的记录功能。在用户移动过程中，应用程序会记录已跑过的距离，还可以把跑步过程对应的坐标显示在地图上，甚至可以显示出海拔信息。如果用户正在和其他选手一起参加跑步比赛，那么应用程序还可以显示其对手的位置。

诸如此类的应用，现在已经很多很多了。

14-2-2位置信息的表示方式

位置信息主要由一对纬度和经度坐标组成，例如:

Latitude:39.17222,Longitude:-120.13778

在这里，纬度（距离赤道以北或以南的数值表示）是39.17222,经度（距离英国格林威治以东或以西的数值表示）是120.13778，经纬度坐标的表示可以使用以下两种方式

・十进制格式，如120.13778

・DMS角度格式，如39度20分

HTML5 Geolocation API返回坐标的格式为十进制格式。除了经纬度的坐标，HTML5

Geolocatio n还提供位置坐标的准确度，并提供其他一些元数据，具体情况取决于浏览器所在的
硬件设备。这些元数据包括海拔，海拔准确度，行驶方向和速度等。如果这些元数据不存在则返回 null。

14-2-3 使用 Geolocation API

geolocation 是 navigator 对象的一^ 属性。这个属性有一^ 方法 getCurrentPosition(), 该方法会返回一个positio n对象给指定的回调函数。

传给youAreHereO函数的position对象有一^ coords属性，该属性又有latitude和longitude属性，二者一起给出了设备的坐标。这些坐标随后可以与其他应用程序或者Web服务(比如地图服务)结合使用，以获取用户的准确位置。示例如下：

<body>

let youAreHere = function(position){

console.log('纬度为：${position.coords.latitude}'); console.log('经度为：${position.coords.longitude}');

}

navigator.geolocation.getCurrentPosition(youAreHere); </script>

</body>

positio n对象还有几个其他的属性，可以用来查找设备的位置和移动信息：

position.speed属性：返回设备的地面速度(米/秒)
position.altitude属性：返回设备的海拔估算值
position.heading属性：返回设备正在移动的方向
position.timestamp属性：返回位置信息被记录的时间

position对象还有计算测量精度的属性。例如position.accurac y属性以米为单位返回经度和纬度的精确度。返回值越低，测量结果的精确度就越高，position.altitudeAccuracy属性就是这种情况，将返回以米为单位的海拔属性的精度。

此外，geolocation对象还有一^? watchPosition()方法，该方法在每次设备的位置更新时，会调用一个回调函数。这个方法返回一个ID，这个ID可以用于引用被观察的位置：

let id = navigator.geolocation.watchPosition(youAreHere);

clea rWatch()方法可以用于阻止调用回调，使用作为观察用的id来作为参数

navigator.geolocation.clearWatch(id);
HTML5 Geolocation API为网站或者应用程序添加基于位置的信息提供了有用的接口，但是大部分接口都需要谷歌地图来提供服务支持。由于国内特殊的环境，所以更多时候是利用百度地图提供的API来获取位置信息。所以Geolocation作为一个了解即可。

14-3 Web Worker （扩展）

在运行大型，复杂的J avaScript脚本的时候经常会出现浏览器假死的现象，那么能不能让这些代码在后台运行，或者让JavaScript函数在多个进程中同时运行呢？ HTML5的Web Worker正是为了解决这个问题而出现的。HTML5的Web Worker可以让Web应用程序具备后台的处理能力。它支持多线程处理功能，因此可以充分利用多核CPU带来的优势，将耗时长的任务分配给H TML5 的Web Worker运行，从而避免了有时页面反应迟缓，甚至假死的现象。

14-3-1 Web Worker 介绍

Web Worker 概述

在Web应用程序中，Web Worker是一项后台处理技术。在此之前，JavaScript创建的Web应用程序中，因为所有的处理都是在单线程内执行的，所以如果脚本所需运行时间太长，程序界面就会长时间处于停止状态，甚至当等待时间超出一定的限度，浏览器就会提示脚本运行时间过长需要中断正在执行的处理。

为了解决这个问题，HTML5新增加了一个Web Worker API。使用这个API，用户可以很容易的创建在后台运行的线程，这个线程被称之为Worker。如果将可能耗费较长时间的处理交给后台来执行，则对用户在前台页面中执行的操作没有影响。

Web Worker的优点如下：

•加载一个JavaScript文件，进行大量的复杂计算，而不挂起主进程，并通

过 postMessage 和 onMessage 进行通行。

•可以在Worker中通过importScripts(url)方法来加载JavaScript脚本文件。

可以使用 setTimeout() , clearTimeout() , setInterval()禾口 clearInterval()。

•可以使用XMLHttpRequest进行异步请求。

•可以访问navigator的部分属性。

•可以使用J avaScript核心对象。

除了上述的优点，Web Worker本身也是具有一定局限性的，具体如下：

•不能跨域加载JavaScript

Worker内代码不能访问DOM

・各个浏览器对Worker的实现还没有完全支持，不是每个浏览器都支持所有的新特性。

・使用Web Worker加载数据没有JSONP和Ajax加载数据高效。

浏览器支持情况
各个浏览器对Web Worker的支持情况不太一样，代表列出了目前主流浏览器对Web Worke啲支持情况：

浏览器	描述
IE	不支持
Firefox	3.5及以上的版本支持
Opera	10.6及以上的版本支持
Chrome	3.0及以上的版本支持
Safari	4.0及以上的版本支持

在调用Web Worker API之前，应该确认一下当前的浏览器是否支持Web Worker。如果不支持，可以提供一些备用信息，提醒用户使用最新的浏览器。例如，可以使用下面的代码来检测浏览器的支持情况：

<body>

if(window.Worker){ console.log("您的浏览器支持 Web Wo rke r");

}

</script>

</body>

如果所使用的浏览器支持Web Worker,则Worker将会作为window对象的一个属性存在，所以我们只需要检测window.Worker是否存在即可判断支持情况。

Web Worker 成员

在开始使用Web Worker之前，我们先来看一下使用Worker时会遇到的属性和方法，如下：

・self： self关键值用来表示本线程范围内的作用域。

postMessageO :向创建线程的源窗口发送信息。
onMessage：获取接收消息的事件句柄。
- importScripts(urls):导入其他JavaScript脚本文件。参数为该脚本文件的URL地址，可以导入多个脚本文件。导入的脚本文件必须与使用该线程文件的页面在同一个域中，并在同一个端口中。

importScripts("worker1.js","worker2.js","worker3.js");

navigator 对象：有 appName , platfo rm , use rAgent 和 appVe rsion 属性，它们可以用来标识浏览器。
sessionStorage/localStorage :在线程中可以使用 Web Storage _o
XMLHttpRequest :在线程中可以嵌套线程。
setTimeoutO/setlnterval。：在线程中可以实现定时处理。
close:结束本线程。
eval。，isNaNO, ecape。等：可以使用JavaScript的核心函数。
object:可以创建和使用本地对象。
WebSockets :可以使用Web Sockets API向服务器发送和接收消息。

14-3-2 Web Worker 的使用

Web Worker的使用方法非常简单，只需要创建一个Web Worker对象，并传入希望执行的 JavaScript文件即可。之后在页面中设置一个事件监听器，用来监听由Web Worker对象发来的消息以及错误信息。如果想要在页面与Web Worker之间建立通信，数据需要通

过postMessage()函数来进行传递。

首先我们开始第一步，创建Web Worker。步骤十分简单，只要在Worker类的构造器中，将需要在后台线程中执行的脚本文件的URL地址作为参数传入，就可以创建Worker对象，如下：

let worker = new Worker("./worker.js");

注意：在后台线程中是不能访问页面或者窗口对象的，此时如果在后台线程的脚本文件中使用 window

或者document对象，则会引发错误。

这里传入的JavaScript的URL可以是相对或者绝对路径，只要是相同的协议，主机和端口即可。如果想获取Worker进程的返回值，可以通过onmessage属性来绑定一个事件处理程序。如下：

<body>

let worker = new Worker("./worker.js");

worker.onmessage = function(){

console.log("the message is back!");

}

</script>

</body>

这里第一行代码用来创建和运行Worker进程，第2行设置Worker的onmessage属性用来绑定事件处理程序，当Worker的postMessage()方法被调用时，这个被绑定的程序就会被触发。

使用Worker对象的postMessage()方法可以给后台线程发送消息。发送的消息可以是文本数据，也可以是任何JavaScript对象，需要通过JSON对象的stri ngify方法将其转换成文本数据。

worker.postMessage(message);

通过获取Worker对象的onmessage事件句柄以及Worker对象的postMessage()方法就可以实现线程内部消息的接收和发送。

Web Worker不能自行终止，但是能够被启用它们的页面所终止。调用ter minate()函数可以终止后台进程。被终止的Web Workers将不再响应任何消息或者执行任何其他运算。终止之后， Worker不能被重新启动，但是可以使用同样的URL创建一个新的Worker。

最后，我们来书写一个完整的例子来演示Worker的工作机制，如下：

首先，是我们的1.html页面代码

<body>

vp>计数：voutput id="result">v/output>v/p>

vbutton onclick="sta rtWo rke r()"> 开始工作 v/button> vbutton onclick="stopWo rke r()"> 停止工作 v/button> vp>vstrong>注意：v/strong>IE9及其以下版本浏览器不支持Web Workers.v/p> vscript> let w;

//开始Wo rke r的代码

function startWorker() {

//判断浏览器是否支持

if (typeof (Worker) !== "undefined") {

if (typeof (w) == "undefined") { w = new Worker("1.js");

} w.onmessage = function (event) { document.getElementById("result").innerHTML = event.data

};

} else { document.getElementById(" result").inne rHTML ="你的浏览器不支持 ";

}

//停止Wo rke r的代码

function stopWorker() {

w.terminate();

w = undefined;

</script>

</body>

接下来我们运行在后台的Worke啲代码，如下：

let i = 0;

function timedCount() {

i = i + 1;

//每次得到的结果都通过postMessage方法返回给前台 postMessage(i);

setTimeout("timedCount()", 500);

}

timedCount();

效果：

计数：8

-开始工作r c停生工作二

注意：Internet Explorer 9及更早IE版本浏览器不支持Web Workers

上面的代码，当用户点击"开始工作"时，会创建一个Web Worker在后台进行计数。每次计的数都会通过postMessage方法返回给前台。当用户点击"停止工作"时，则会terminate。方法来终止 Web Worker 的运行。

14-4多媒体

在H TML5之前，要在浏览器中显示音频和视频是非常困难的，经常我们需要使用类似于Flash这 —类的插件才能够实现。不过，从H TML5开始引入了 vaudio>和video这两个标签可以实现在网页中快速插入音频和视频，同时我们还可以使用J avaScript来控制多媒体的播放。

14-4-1引入多媒体

引入多媒体的方式如下：

<body>

您的浏览器不支持audi o标签

</audio>

</body>

上面的代码我们就在页面里面引入了一个音频标签。对于支持该标签的浏览器，会正常显示出音频的控制面板（注意必须要书写controls属性），而对于不支持该标签的浏览器，则会显示出中间的那句"您的浏览器不支持audi o标签"

・src:多媒体文件的路径

controls:显示控制面板

为了做到浏览器兼容，我们可以将多媒体文件的路径写在vsou rce>标签里面。然后可以对应对应多个多媒体文件。浏览器会自动选择第一个可以识别的格式，示例如下：

<body>

您的浏览器不支持audi o标签

</audio>

</body>

如果要插入视频，那么只需要将上面的<audio>标签换成<video>标签即可。

14-4-2相关属性和方法

muted属性用来设置当前媒体是否开静音，如果设置为true代表开启静音，false为不开启

<body>

<source src="./test.ogg"> 您的浏览器不支持audi o标签

</audio>

</body>

autobuffer属性设置为true后将实现自动缓冲

<body>

<source src="./test.ogg"> 您的浏览器不支持audi o标签

</audio>

</body>

autopla y属性设置为自动播放

<body>

<source src="./test.ogg"> 您的浏览器不支持audi o标签

</audio>

</body>

・loop属性设置后将会重复播放

<body>

<source src="./test.ogg"> 您的浏览器不支持audi o标签

</audio>

</body>

・poster属性设置视频的封面，没有播放时可以显示一张图片（注意此属性只有video标签拥有，audio无此属性）

<body>

<source src="./test.swf"> 您的浏览器不支持V ide o标签

</video>

</body>

width和height属性用于设置视频的宽度和高度

我们可以通过DO M的方法之一来引用到页面里面的vaudio>或者<video>标签，如下：

const Video = document.getElementsByTagName("Video")[0];

引用成功之后我们就可以在此元素上面对多媒体进行控制，例如上面我们所介绍的属性都是可以通过在引用后的元素上面来进行设置的，如下：

video.muted = tr ue;//设置为静音 video.loop = tr ue; //设置循环播放

还可以在引用了元素的基础上进行一些其他的设置，如下：

volune属性用于设置音量

Video.Volume = 0.9;

currentTime属性用于获取多媒体当前所播放的具体时间

video.cu rr entTime += 10; //视频播放快进 10 秒

・playbackRate属性该属性用于设置快进或者快退速度的数字值。值为1时表示以正常速度播放

video.playbackRate = 8;// 以8 被速度快进

・duration属性用于查看该多媒体的持续时间，也就是时长为多久

video.duration

音频和视频也有很多可以触发的事件，包括：

・play事件，用于开始播放多媒体

pause事件，用于暂停多媒体
volumechange事件，用于调整多媒体的音量
loadedmetadata事件，在多媒体的所有元数据被加载时会触发该事件

这些事件可以让我们响应用户和视频的所有的交互。例如，如下的事件监听器可以检测用户是否暂停了视频的播放：

video.addEventLister('pause',()=>{

console.log('视频已经暂停');

},false);

当然，除了上面所介绍的属性和方法以外，HTML5中还提供了其他的API来让开发者对多媒体文件进行控制。完整的文档可以参见如下地址：

https://www.w3.org/2010/05/video/mediaevents.html

14-5 Canvas画图（次重点）

14-5-1认识canvas元素

在HTML5中引入了 canvas , canvas元素是网页上一^矩形的单元，可以用JavaScript在上面绘画。控制其每一个像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas主要应用于如下的领域：

•游戏:canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas游戏在流畅度和跨平台方面更牛。

•可视化数据（数据图表话），比如：百度的echart、 d3.js、 three.js

・banner广告:Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代， HTML5技术能够在banner广告上发挥巨大作用，用canvas实现动态的广告效果再合适不过。

•未来

模拟器:无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。远程计算机控制:canvas可以让开发者更好实现基于Web的数据传输，构建一个完美的可视化控制界面。

图形编辑器:Photoshop图形编辑器将能够100%基于Web实现。

1.添加canvas元素

要添加canvas的方法很简单，就是书写一个canvas标签。注意这是一个双标签，默认什么都不会显示，如果想要看到画布，可以添加一个border

<body>

</body>

如何绘制图像

canvas本身不能进行绘制图形，绘制图形的工作都是交给JavaScript来完成的。绘制图形的步骤大致分为如下4个步骤：

添加canvas元素
在JS中获取canvas元素
获取到上下文，创建context对象

画布上下文是一个包含用于在画布上画画的所有方法的对象

使用JS来进行绘制

示例如下：

<body>

<!— 添加canvas兀素 —>

//在JS中获取canvas元素

let canvas = document.getElementsByTagName('canvas')[0];

//获取到上下文，创建context对象

let context = canvas.getContext("2d");

//使用JS来进行绘制

context.beginPath();//开始路径

context.moveTo(10,10);

context.lineTo(100,100);

context.closePath();//闭合路径 context.stroke();

</script>

</body>

效果:

这里需要提一个关于Canvas设置宽高的注意事项。在Canvas中默认有一个宽高，值为 300*150。如果我们在vstyle＞里面再设置Canvas的宽高的话，此时会有一个拉伸效果，如

下:

<head>

<style>

canvas{

400px;

height: 300px;

border: 1px solid;

}

</style>

</head>

<body>

<!— 添加canvas兀素 —>

//在JS中获取canvas元素

let canvas = document.getElementsByTagName('canvas')[0];

//获取到上下文，创建context对象

let context = canvas.getContext("2d");

//使用JS来进行绘制

context.beginPath();//开始路径 context.moveTo(10, 10);

context.lineTo(100, 100); context.closePath();//闭合路径 context.stroke();

</script>

</body>

效果：canvas的宽高同样是400*300，但是由于我们是在<style>里面设置的宽高，此时会对 canvas进行一^拉伸，如下图

关于坐标

canvas里面坐标的计算和平时我们在数学里面接触的x轴，y轴的计算方式一样，如下图:

Vertical ex
y-axis

(-3,1)

Hcxizontal or

x*axis

Ongin (0, 0)

4.查看浏览器是否支持canvas

并不是所有的浏览器都支持canvas，我们可以通过下面这个最简单的方式来检测浏览器是否支持 canvas。对于不支持canvas的浏览器，会将里面的话直接输出出来，如下：

您的浏览器不支持canvas元素，请升级您的浏览器

</canvas>

还有一种方法，就是利用JS里面检测getContext属性是否存在，如果存在就是支持，不存在就是不支持。示例如下：

<body>

<!— 添加canvas兀素 —>

<canvas width="400" height="300" style="border:1px solid"> 您的浏览器不支持canvas元素，请升级您的浏览器

</canvas>

//在JS中获取canvas元素

let canvas = document.getElementsByTagName('canvas')[0]; if(canvas.getContext){

console.log("支持")；

}else{

console.log("不支持")；

}

</script>

</body>

14-5-2绘制简单图形

绘制直线

绘制直线用到的方法有3个：moveTo()、lineTo()、stoke()

moveTo():相当于将画笔移动到某一个坐标

lineTo():勾勒一条线，但是这只是草稿

stoke():根据勾勒的线描边

具体示例：画出两条对角线

<body>

<!— 添加canvas兀素 —>

<canvas width="400" height="300" style="border:1px solid"> 您的浏览器不支持canvas元素，请升级您的浏览器

</canvas>

//在JS中获取canvas元素

let canvas = document.getElementsByTagName('canvas')[0]；

//获取到上下文，创建context对象

let context = canvas.getContext("2d")； context.moveTo(0,0)；

context.lineTo(400,300)；

context.moveTo(400,0)；

context.lineTo(0,300)； context.stroke()；

</script>

</body>

效果:

绘制矩形

在绘制矩形之前，我们先来看一下在canvas中如何设置颜色。通过storkeStyle属性可以指定勾勒图形时的颜色，而fillStyle则是用于指定填充图形时的颜色。颜色的取值和CSS里面一样。示例如下：我们在绘制上面的对角线之前改变一下颜色：

<body>

<!— 添加canvas兀素 —>

<canvas width="400" height="300" style="border:1px solid"> 您的浏览器不支持canvas元素，请升级您的浏览器

</canvas>

//在JS中获取canvas元素

let canvas = document.getElementsByTagName('canvas')[0];

//获取到上下文，创建context对象

let context = canvas.getContext("2d"); context.moveTo(0,0);

context.lineTo(400,300);

context.moveTo(400,0);

context.lineTo(0,300);

context.st rokeStyle = "#ff0000";//设置勾勒颜色 context.stroke();

</script>

</body>

效果:

接下来我们来绘制矩形。在canvas里面绘制矩形的方法有两

个：fillRect()和strokeRect()。这两个方法所接受的参数值一样分别为x坐标，y坐标，矩形长和矩形宽，区别在于前面的方法是填充矩形，后面的是空心矩形

<body>

<!— 添加canvas兀素 —>

<canvas width="400" height="300" style="border:1px solid"> 您的浏览器不支持canvas元素，请升级您的浏览器

</canvas>

//在JS中获取canvas元素

let canvas = document.getElementsByTagName('canvas')[0]; //获取到上下文，创建context对象

let context = canvas.getContext("2d"); context.fillStyle = "#ff0000";//设置填充颜色 context.fillRect(100,100,100,50);//绘制填充矩形 context.st rokeRect(200,200,100,50);//绘制空心矩形

</script>

</body>

效果: