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>
<script>
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>
<script>
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>
<script>
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 ="你的浏览器不支持 ";
f
}
}
//停止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>
<audio src="./test.mp3" controls>
您的浏览器不支持audi o标签
</audio>
</body>
上面的代码我们就在页面里面引入了一个音频标签。对于支持该标签的浏览器，会正常显示出音 频的控制面板（注意必须要书写controls属性），而对于不支持该标签的浏览器，则会显示出中间的 那句"您的浏览器不支持audi o标签"
・src:多媒体文件的路径
- controls:显示控制面板
为了做到浏览器兼容，我们可以将多媒体文件的路径写在vsou rce>标签里面。然后可以对应对 应多个多媒体文件。浏览器会自动选择第一个可以识别的格式，示例如下：
<body>
<audio controls>
<source src="./test.mp3">
<source src="./test.ogg">
您的浏览器不支持audi o标签
</audio>
</body>
如果要插入视频，那么只需要将上面的<audio>标签换成<video>标签即可。
14-4-2相关属性和方法
- muted属性用来设置当前媒体是否开静音，如果设置为true代表开启静音，false为不开启
<body>
<audio controls muted=true>
<source src="./test.mp3">
<source src="./test.ogg"> 您的浏览器不支持audi o标签
</audio>
</body>
- autobuffer属性设置为true后将实现自动缓冲
<body>
<audio controls autobuffer=true>
<source src="./test.mp3">
<source src="./test.ogg"> 您的浏览器不支持audi o标签
</audio>
</body>
- autopla y属性设置为自动播放
<body>
<audio controls autoplay=true>
<source src="./test.mp3">
<source src="./test.ogg"> 您的浏览器不支持audi o标签
</audio>
</body>
・loop属性设置后将会重复播放
<body>
<audio controls loop=true>
<source src="./test.mp3">
<source src="./test.ogg"> 您的浏览器不支持audi o标签
</audio>
</body>
・poster属性设置视频的封面，没有播放时可以显示一张图片（注意此属性只有video标签拥 有，audio无此属性）
<body>
<video controls poster="./1.jpg">
<source src="./test.mp4">
<source src="./test.ogv">
<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来让开发者对多媒体文 件进行控制。完整的文档可以参见如下地址：
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>
<canvas width="400" height="300" style="border:1px solid"> </canvas>
</body>
- 如何绘制图像
canvas本身不能进行绘制图形，绘制图形的工作都是交给JavaScript来完成的。绘制图形的步骤 大致分为如下4个步骤：
- 添加canvas元素
- 在JS中获取canvas元素
- 获取到上下文，创建context对象
画布上下文是一个包含用于在画布上画画的所有方法的对象
- 使用JS来进行绘制
示例如下：
<body>
<!— 添加canvas兀素 —>
<canvas width="400" height="300" style="border:1px solid"></canvas> <script>
//在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>
<meta charset="UTF-8"> <title>Document</title>
<style>
canvas{
400px;
height: 300px;
border: 1px solid;
}
</style>
</head>
<body>
<!— 添加canvas兀素 —>
<canvas></canvas>
<script>
//在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 width="400" height="300" style="border:1px solid">
您的浏览器不支持canvas元素，请升级您的浏览器
</canvas>
还有一种方法，就是利用JS里面检测getContext属性是否存在，如果存在就是支持，不存在就是 不支持。示例如下：
<body>
<!— 添加canvas兀素 —>
<canvas width="400" height="300" style="border:1px solid"> 您的浏览器不支持canvas元素，请升级您的浏览器
</canvas>
<script>
//在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>
<script>
//在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>
<script>
//在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>
<script>
//在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>
效果: