##HTML5的复习## ③

<canvas>元素可以定义一张画布，可以通过JavaScript脚本语言在canvas元素上进行绘图。可以设置宽度和高度；而真正去画图、画线、画文字、填充颜色、描边、渐变这些都是JavaScript脚本语言在该canvas画布上去进行的，甚至可以去添加一个帧的概念，这就是动画或游戏啦。

画圆：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid LightGray;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

什么是SVG？

SVG是可缩放矢量图形（Scalable Vector Graphics）的简称。
SVG是基于可扩展标记语言（XML），可用于描述二维矢量图形。
SVG是W3C("World Wide Web ConSortium" 即 " 国际互联网标准组织")在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。
SVG指的是矢量图，与图像分辨率无关。

<svg>元素是进行svg绘图的容器。

画圆：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="#46acb6" stroke-width="4" fill="#d4d854" />
  这是一个圆形
</svg>

SVG对比Canvas

SVG:
SVG是一种用XML语言来描述2D矢量图形的语言。
因为是基于XML语言的，所以SVG元素内的一个个图形元素，就是一个个对象，当这些元素对象发生改变，页面上的显示也会随之改变。

• 矢量的；
• 绘制的图形内容支持浏览器事件绑定；
• 非常适合具有具有大面积区域渲染需求的应用（如网页地图）；
• 矢量元素太过复杂，会导致渲染速度变慢，毕竟是基于DOM的；
• 完全不适合开发游戏。

Canvas:
Canvas是通过JavaScript脚本在画布元素上进行绘制。
Canvas元素就像是一张动态的画布，它是逐像素进行渲染的。它就是一张由有限数量的像素构成的影布；JavaScript来从时间、空间两个角度对这张影布的每一个像素进行色彩赋值。一切关于Canvas的绘制函数从本质上都可以看成从空间角度对指定canvas元素进行像素赋值。再极端一些，Canvas元素就是彩色马赛克的瓷砖墙，但是JavaScript可以控制每一块瓷砖的颜色变化。夜店的washroom就是这样的。

• 基于像素的；
• 绘制的图形内容不支持浏览器事件绑定；
• 文本渲染能力不强；
• 可以保存图像结果为.png或者.jpg格式；
• 非常适合开发游戏。

1、HTML <video> 元素

<video>元素中可能会有不只1个<source>元素，source元素可指出流媒体的来源、格式等信息，浏览器则会以video元素中可以被兼容识别读取的第1个source元素为准，其他的都会忽略。

<video width="192" height="144" controls>
  <source src="https://logo.zhuanfou.com/zhuan.mp4" type="video/mp4">
  <source src="https://logo.zhuanfou.com/zhuan.ogg" type="video/ogg">
  小贼，你的浏览器太落后了，该换浏览器啦 —_—
</video>

要点1：video元素如果添加controls属性，视频则会带有播放、暂停、音量这些控制按钮；
要点2：通常情况下，video元素应该被设置好width和height属性；
要点3：如果浏览器不兼容video元素，则会显示出video元素内预设的提示文字；（对于用过时浏览器，我们要包容，与委婉劝解，千万别上去就骂“侬脑子瓦特啦”）

给<video>元素添加上autoplay属性，视频即可自动播放。

<video width="192" height="144" autoplay>

2、HTML <audio> 元素

使用<audio>元素在网页中嵌入音频：

<audio controls>
  <source src="https://logo.zhuanfou.com/niubi.ogg" type="audio/ogg">
  <source src="https://logo.zhuanfou.com/niubi.mp3" type="audio/mpeg">
  小贼，你的浏览器太落后了，该换浏览器啦 —_—
</audio>

3、HTML <object> 元素：用来定义一个被嵌入HTML文档的对象，一般来说嵌入的是插件，如Flash Players、Java applets、PDF readers等。

<object width="192" height="144" data="https://logo.zhuanfou.com/zhuan.swf"></object>

还可以在HTML中嵌入HTML代码

<object width="100%" height="500px" data="https://zhuanfou.com"></object>

<object>元素法力无边，甚至可以用来嵌入图片（有点浮夸）

<object data="https://logo.zhuanfou.com/zhuanfou-logo.png" width="100"></object>

4、HTML <embed> 元素：定义一个被嵌入HTML文档的对象

<embed>是不存在闭合标签的

<embed width="192" height="144" src="https://logo.zhuanfou.com/zhuan.swf">

<embed width="100%" height="500px" src="https://zhuanfou.com">

<embed src="https://logo.zhuanfou.com/zhuanfou-logo.png" width="100">

5、在HTML5中使用Geolocation（地理定位）

<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        alert( "亲，该设备上的浏览器不支持地理定位~" );
    }
}

function showPosition(position) {
    var infoPosition = "纬度：" + position.coords.latitude + 
    " 经度：" + position.coords.longitude;
    alert( infoPosition );
}
</script>

代码解析：

• if (navigator.geolocation) 这句是在检查是否支持地理定位API；
• 如果支持，则通过 getCurrentPosition() 获得地理位置信息；如果不支持，就提示用户一下该功能不支持；
• 如果定位成功的话，则会运行定位成功的回调函数 showPosition 函数；定位这个事情是需要花时间的，一般要等几秒；另外，如果上述案例测试不成功，可以试着换一个浏览器试试，chrome浏览器对该功能的应用已经更加严格了，毕竟涉及用户隐私；另外大部分的笔记本电脑与台式电脑从硬件上来说是没有定位模块的，所以很可能调用失败，Macbook相对会好一些，应该可以定位成功的；
• 在 showPosition() 函数里可以设置如何展示定位结果中的经纬坐标，函数内部是可以自由设计的，可以alert出来，也可以console.log的方式输出；以及showPosition这个函数的名称是可以随便起名的，只要getCurrentPosition()把预设的回调函数名传参进去即可，例如也可以起名为fuck_postion函数，预设好就ok啦，getCurrentPosition( fuck_position )即可。

上面的这个例子是相对单纯简单地展示了如何使用HTML5地理定位，下面会逐步介绍如何处理调用API失败。

在地图上显示定位结果

利用高德地图提供的API来在高德地图上展示出定位的结果：把经度坐标和纬度坐标分别填入下方的url地址中，然后跳转到该url地址，即可在高德地图中展示这个位置点。

https://uri.amap.com/marker?position=<longitude>,<latitude>

Geolocation对象的其他方法

Geolocation对象还有一些其他有趣的方法：

• watchPosition() 实时返回用户设备所在位置，只要用户位置发生改变，则会触发回调函数以返回结果；
• clearWatch() 停止对象正在进行的watchPosition()方法。

如下例所示，但这个例子最好用iphone来测试，当然也可以稍微移动一下macbook笔记本来测试，贫道就是抱着macbook笔记本电脑左右移动来测试的，能测试成功的。

<script>
var x = document.getElementById("demo");
var times = 0;

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else { 
        x.innerHTML = "呵呵，小贼，你的浏览器太过时了，不兼容";}
    }

function showPosition(position) {
    times += 1; // 记录是第几次进行回调，方便看出效果
    x.innerHTML="这是第" + times.toString() + "次返回结果<br>纬度：" + position.coords.latitude + 
    "<br>经度：" + position.coords.longitude;
}
</script>

H5 Web Storage

可以实现数据在前端浏览器内进行存储。

HTML5以前，这些数据都必须存在每一次web请求的cookies中。而Web Storage则提供了不一样的可能，Web Storage不仅可以存储更大量的数据，而且更加安全，同时让每一次web请求更加轻量快捷。（整体来说，Web Storage比Cookies表现得更加优秀，但是并非所有场景下Web Storage都能取代Cookies）

与Cookies不同的是，Web Storage可存储的数据量会大很多，一般来说，至少5MB，而且这些数据就是存在浏览器内，不需要依托与服务器之间的web请求。

Web Storage虽然是存在浏览器端的，但是它是独立而安全的，不同域名与协议的Storage空间是分离独立的，网站网页只能读取属于自身域名和协议的那一部分存储空间，所以不同域名之间是独立而安全的。

• window.localStorage - 存储数据（数据没有过期时间，可永久存储）
• window.sessionStorage - 临时存储数据 （当浏览器选项卡关闭，存储的数据就会丢失

H5 Web Workers

什么是Web Worker？

一个web worker就是一个跑在浏览器后台的JavaScript脚本程序；其不会阻塞网页页面的渲染，因为等于是跑在浏览器背后的另外一个进程。两个进程是相对独立的。

 

完整的Web Worker案例

把上面的每一步联系起来，如下例所示：

<!DOCTYPE html>
<html>
<body>

<p>Web Worker进程发送过来的数据：<output id="result"></output></p>
<button οnclick="startWorker()">创建 Worker</button> 
<button οnclick="stopWorker()">终止 Worker</button>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("./static/worker.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "小贼，你的浏览器太落后了，不兼容老夫的web worker呀";
    }
}

function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>

H5 SSE

SSE是Server-Sent Events的简称，用汉语来说就是“服务器发送事件”，但是下文会尽量采用英文原文“Server-Sent Events”，即SSE的全称。

SSE可以让服务器推送数据给web页面。其实Websocket也有这个功能。

SSE的优势

SSE相对Websocket还是有一些优势的：

• SSE是基于现有的HTTP/HTTPS协议上运作的，服务器端不需要像针对Websocket那样进行特殊的配置；
• SSE是文本协议（通常基于UTF-8编码），Websocket是二进制协议；
• SSE最大优势就是用起来简洁，前端和后端都不需要太复杂的配置，这是Websocket所无法做到的；
• 如果想测试SSE的接口直接命令行使用curl命令即可。

总之一句话，SSE最大的优势就是简便。否则这个术语早就从地球上消亡了。

SSE完整的示例

<!DOCTYPE html>
<html>
<body>

<h1>收到服务器方的数据：</h1>
<div id="result"></div>

<script>
if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("/sse_test");
    source.onmessage = function(event) {
        document.getElementById("result").innerHTML += event.data + "<br>";
    };
} else {
    document.getElementById("result").innerHTML = "小贼，你的浏览器太落后了，竟然不支持SSE";
}
</script>

</body>
</html>

H5 Websocket

Websocket的特点

• 建立在TCP协议上
• 与HTTP/HTTPS协议具有良好的兼容性，握手阶段采用HTTP/HTTPS协议；
• 连接上后每次数据交互的数据很轻量，性能开销小，有助于更加高效地通信；
• 投过Websocket协议，服务器可以主动发数据给客户端，从而避免了轮询，在应用层面，大大增加了通信的高效即时性；
• 既可以发送文本、也可以发送二进制数据；
• 并不要求与HTML页面本站处于相同的域名之下，换言之，天生支持跨域请求；
• 协议标识符为ws（如果ssl加密则为wss），例如ws://xxx.com/xxx

（更多详情请上W3Cshool，由于我的理解有限，还请谅解！谢谢）