Html5新方法

html5 的新特性

canvas绘图

1.添加canvas标签,创建画布，一个画布在网页中是一个矩形框，通过 元素来绘制。默认情况下 元素没有边框和内容。

<canvas id='myCanvas' width=200px height=100px style='border: 1px solid #ccc'></canvas>

2. 获得canavs元素

var canvas =document.getElementById('myCanvas');

3. 获得canvas上下文对象,画笔，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

var ctx = canvas.getContext('2d'); 

canvas- 路径

在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 “ink” 的方法，就像stroke()。

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>

定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条
ctx.stroke(); 描边
ctx.fill();填充
ctx.lineWidth = 20; 设置线段宽度
ctx.closePath(); 闭合当前路径 和回到起始点的区别
重点
1.fill和stroke方法都是作用在当前的所有子路径
2.完成一条路径后要重新开始另一条路径时必须使用beginPath()方法, beginPath开始子路径的一个新的集合

canvas-文本

使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y,maxWidth); 在画布上绘制“被填充的”文本
text(文本)，x，y（文本开始的坐标），maxWidth（ 可选。允许的最大文本宽度，以像素计）
strokeText(text,x,y) - 在画布上绘制文本（无填充）

ctx.font = '30px';
ctx.fileText('hello',10,5)

canvas-图形

矩形
ctx.rect(x, y, dx, dy);
ctx.fillRect(x, y, dx, dy);
ctx.strokeRect(x, y, w, h);
ctx.clearRect(x, y, dx, dy);
弧形
ctx.arc(x, y, r, 起始弧度, 结束弧度,弧形的方向 )
角 以弧度计，0顺时针 1逆时针
圆角
ctx.arcTo(x1, y1, x2, y2, r)
绘制的弧线与当前点和x1,y1连线，x1,y1和x2,y2连线都相切

贝塞尔曲线
quadraticCurveTo(x1, y1, ex, ey) 二次贝塞尔曲线
x1,y1 控制点
ex,ey 结束点
bezierCurveTo(x1, y1, x2, y2, ex, ey) 三次贝塞尔曲线
x1,y1，x2,y2 控制点
ex,ey 结束点

canvas-渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

canvas-图像

1. ctx.drawImage();
   第一个参数是img(Image,canvas,video) 注：onload
2. 3个参数 (x, y)
   起始点坐标
3. 5个参数 (x, y, dx, dx)
   起始点坐标及图片所存区域的宽高
4. 9个参数 (x1, y1, dx1, dy1, x2, y2, w2, h2)
   前四个为所绘制目标元素的起始点和宽高；
   后四个为canvas绘制的起始点和大小；

   var img=document.getElementById("scream");
   ctx.drawImage(img,10,10);
   

   canvas-阴影

   ctx.shadowColor
   ctx.shadowOffsetX
   ctx.shadowOffsetY
   ctx.shadowBlur
   注：这里的偏移量不受坐标系变换的影响

svg绘图

1.添加svg标签

<svg width=“500px” height=“500px”></svg>

2. 直线

<line x1="100" y1="100" x2="200" y2=”100”></line>

3. 矩形

<rect x="50" y="50" width="100" height="100" rx="10"ry="20"></rect>

4. 圆形

<circle r="50" cx="220" cy="100"></circle>

5. 椭圆

<ellipse rx="100" ry="50" cx="100" cy="200"></ellipse>

6. 折线

<polyline points="60 50, 75 35, 100 50, 125 35, 150 50,
175 35, 190 50"></polyline>

7. 多边形

<polygon points="125 125,130 140,120 140"></
polygon>

8. 文本

<text x="125" y="220">hello,world</text>

HTML5动画API—— requestAnimationFrame

在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，即requestAnimationFrame，顾名思义就是请求动画帧。 为了深入理解 requestAnimationFrame 背后的原理，我们首先需要了解一下与之相关的几个概念：
1、屏幕刷新频率
即图像在屏幕上更新的速度，也即屏幕上的图像每秒钟出现的次数，它的单位是赫兹(Hz)。 对于一般笔记本电脑，这个频率大概是60Hz，这个值的设定受屏幕分辨率、屏幕尺寸和显卡的，原则上设置成让眼睛看着舒适的值都行。
1000ms 60fps -> 16ms 平均每16ms刷新一次页面
2、动画原理
动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡。
刷新频率为60Hz的屏幕每16.7ms刷新一次，如果我们在屏幕每次刷新前，将图像的位置向左移动一个像素，即1px，这样一来，屏幕每次刷出来的图像位置都比前一个要差1px，你就会看到图像在移动；由于我们人眼的视觉停留效应，当前位置的图像停留在大脑的印象还没消失，紧接着图像又被移到了下一个位置，这样你就会看到图像在流畅的移动，这就是视觉效果上形成的动画。
3、setTimeout
理解了上面的概念以后，我们不难发现，setTimeout 其实就是通过设置一个间隔时间来不断的改变图像的位置，从而达到动画效果的。但我们会发现，利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个原因：

setTimeout的执行时间并不是确定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，所以 setTimeout 的实际执行时机一般要比其设定的时间晚一些。
刷新频率受屏幕分辨率和屏幕尺寸的影响，不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。
以上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象。 那为什么步调不一致就会引起丢帧呢？

首先要明白，setTimeout的执行只是在内存中对图像属性进行改变，这个变化必须要等到屏幕下次刷新时才会被更新到屏幕上。如果两者的步调不一致，就可能会导致中间某一帧的操作被跨越过去，而直接更新下一帧的图像。假设屏幕每隔16.7ms刷新一次，而setTimeout每隔10ms设置图像向左移动1px， 就会出现如下绘制过程：

第0ms: 屏幕未刷新，等待中，setTimeout也未执行，等待中；
第10ms: 屏幕未刷新，等待中，setTimeout开始执行并设置图像属性left=1px；
第16.7ms: 屏幕开始刷新，屏幕上的图像向左移动了1px， setTimeout 未执行，继续等待中；
第20ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=2px;
第30ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=3px;
第33.4ms:屏幕开始刷新，屏幕上的图像向左移动了3px， setTimeout未执行，继续等待中；
…

从上面的绘制过程中可以看出，屏幕没有更新left=2px的那一帧画面，图像直接从1px的位置跳到了3px的的位置，这就是丢帧现象，这种现象就会引起动画卡顿。
4、requestAnimationFrame
与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲就是，系统每次刷新之前会主动调用requestAnimationFrame中的回调函数，如果系统刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个间隔时间就变成了1000/75=13.3ms。换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。
兼容函数：

window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();

客户端存储

storage

客户端存储数据的两个对象为：
存储的有限期
localStorage - 没有时间限制的数据存储，永久性的，除非手动删除
sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。
作用域
localStorage->文档源限制
sessionStorage->文档源限制+窗口
存储localStorage：(可以存储字符串或者json格式数据)
localStrorage.name = ‘aimee’ 或
localStorage.info = JSON.stringify({name:'aimee,company: ‘duyi’})
获取localStorage：
localStorage.name
API

1. setItem(name,val) 设置属性值
2. getItem(name) 获得属性值
3. removeItem(name) 移除属性
4. localStorage.key(index); 得到某个索引的key
5. clear() 清除属性

cookie

存储信息到用户的设备上，数据量较小
检测是否启用了cookie
navigator.cookieEnabled
设置cookie值：
document.cookie = “name=aimee”
（每次只能设置一个值，因为浏览器会认为后面的键值对是这个cookie的属性）
获得cookie值：
document.cookie

history

1、history.back() 跳转到下一条历史记录
2、history.forward() 跳转到上一条历史记录
3、history.go(n) 跳转到指定的页面，当前n为0
4、history.pushState(state, title, url); 添加一条历史记录
5、history.replaceState(state, title, url); 替换当前的历史记录
参数
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数中。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
事件
1、popstate 事件
历史记录发生改变时触发
调用history.pushState()或者history.replaceState()不会触发popstate事件
2、hashchange事件
当页面的hash值改变的时候触发，常用于构建单页面应用

web worker

var worker = new Worker(‘worker.js’);
worker文件必须和主文件满足同源策略

worker和主线程之间的通信

1、postMessage(n)方法
2、message事件

主线程代码

worker.js 代码

结束一个worker

close() 在worker作用域中调用(worker.js)
terminate() 在worker对象上调用(主进程的worker对象上 worker.terminate)

其他特性

1、importScripts(’./math1.js’,’./math2.js’)
worker只是window的子集，只能实现部分功能，不能获取到window, document，所以这里不要引juery zepto。可以引入一些计算类的库。
2、作用域 globalWorkerScope
可以继续生成worker对象 (暂时还不支持)
navigator
XMLHttpRequest
setTimeout/serInterval

地理定位 geolocation

HTML5 Geolocation（地理定位）用于定位用户的位置

window.navigator.geolocation

1、getCurrentPosition(s,e,p) // 获取当前的位置信息
success回调 (必选)
error回调
options参数
需要翻墙
2、watchPosition() // 用于注册监听器，在设备的地理位置发生改变的时候自动被调用，参数与getCurrentPosition一样，
3、clearWatch(id) // 清除位置监视

地理位置 Geoposition

属性：
latitude 纬度
longitude 经度
altitude 海拔
accuracy 定位精准度，单位m
altitudeAccuracy 海拔精准度，单位m
heading 方向
speed 速度
https://dev.w3.org/geo/api/spec-source.html#coordinates_interface

位置误差 PositionError

用户拒绝 code = 1
获取不到 code = 2
连接超时 code = 3
https://dev.w3.org/geo/api/spec-source.html#position_error_interface

配置参数

enableHighAccuracy 是否需要高精度位置默认false
timeout 单位ms 请求超时时间 默认infinity
maximumAge 单位ms，位置信息过期时间 设置为0就无条件获取新的地理位置信息 默认0
https://dev.w3.org/geo/api/spec-source.html#position_options_interface

devicemotion

1.accelerationIncludingGravity （包括重心引力）重力加速度
2.acceleration 重力加速度
（需要陀螺仪支持）
3.rotationRate(alpha, beta, gamma)旋转速率
4.interval // 获取的时间间隔
均为只读属性

摇一摇代码

音频 视频

1.创建一个音频和视频标签

var audio = new Audio('./laojie.mp3');

<audio id="audio" src="./成都.mp3"></audio>
<video id="video" src="./成都.mp4"></video>

2.属性
1、autoplay 自动播放

<audio src="成都.mp3" autoplay></audio>

2、controls 设置控件

<audio src="成都.mp3" autoplay controls></audio>

3、preload(none/metadata/auto) 预加载

none 不需要加载数据
metadata 加载元数据
auto 浏览器应当加载它认为适量的媒体内容

<audio src="成都.mp3" autoplay controls preload="auto"></audio>

元数据：任何文件系统中的数据分为数据和元数据。数据是指普通文件中的实际数据，而元数据指用来描述一个文件的特征的系统数据，诸如访问权限、文件拥有者以及文件数据块的分布信息(inode…)等等。

4、loop 是否循环播放音/视频

<audio src="成都.mp3" autoplay controls loop preload="auto"></audio>

5、poster (video 独有)
当视频不可用时，使用一张图片替代，否则是空白

<video src="成都.mp4" poster="封面.jpg" controls></video>

6、volume 播放音量
表示播放音量，介于0(静音)~1(最大音量)之间，默认1。将muted属性设置为true则会进入静音模式，设置为false则会恢复之前指定的音量继续播放。

超过范围会报错[0, 1]
7、 playbackRate 播放速率
用于指定媒体播放的速度。该属性值为1.0表示正常速度，大于1则表示”快进”，0~1之间表示”慢放"，负值表示回放。
每个浏览器实现的会有差别，具体看浏览器实现
8、currentTime
设置或返回音频/视频播放的当前位置
9、duration 返回当前音频/视频的时长(window.onload)
单位 秒
10、played
返回已经播放(看过)的时间段
11、buffered
返回当前已经缓冲的时间段
12、seekable
则返回用户可以跳转的时间段

这三个属性都是TimeRanges对象，每个对象都有一个length属性以及start()和end()方法，length属性表示当前的一个时间段，start()与end()分别返回当前时间段的起始时间点和结束时间点(单位是秒，起始参数是0)

13、paused/seeking/ended
这三个属性用来查询媒体播放状态，paused为true表示播放器暂停。seeking为true表示播放器正在调到一个新的播放点，如果播放器播放完媒体并且停下来，则ended属性为true。

3.方法
1、play() 方法 播放
2、pause() 方法 暂停
3、load()方法 重新加载
重新加载视频/音频元素，用于在更改来源或其他设置后对音频/视频元素进行更新

4.事件
play 开始播放触发
pause 暂停触发
loadedmetadata 浏览器获取完媒体的元数据触发
loaddeddata 浏览器已经加载完当前帧数据，准备播放时触发
ended 当前播放结束后触发


readyState属性音频的当前就绪状态

networkState 属性返回音频的当前网络状态

error 事件在音频/视频(audio/video)加载发生错误时触发

多类型资源

<audio id="music">
        <source src="成都.mp3" type="audio/mpeg">
        <source src="成都.ogg" type='audio/ogg"'>
    </audio>

source标签必须放在audio或者video标签里面才能使用，用来加载多个资源。为了兼容多类型浏览器

拖放API

1.创建可拖动元素

<div id="drag" draggable="true"></div>

2.拖拽相关事件
dragstart 被拖拽元素 开始被拖拽时触发 e.dataTransfer.setData(“data”,e.target.id)
dragend 被拖拽元素 拖拽完成时
dragenter 目标元素 拖曳元素进入目标元素
dragover 目标元素 拖拽元素在目标元素上移动
drop 目标元素 被拖拽的元素在目标元素上同时鼠标放开触发的事件 e.dataTransfer.getData(“data”)
需要阻止dragover的默认行为才会触发drop事件
3.DragEvent事件对象
传值
e.dataTransfer.setData(“data”,e.target.id)

取值
e.dataTransfer.getData(“data”)

使用拖拽上传文件

ele.addEventListener(‘dragover’, function (e) {
e.preventDefault();
}, false);
ele.addEventListener(‘drop’, function (e) {
//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
e.preventDefault();
console.log(e)
var dt = e.dataTransfer;
var files = dt.files;
console.log(files);
}, false)

FileReader 用于读取文件

1.创建一个file对象
file = new FileReader();
2.方法
abort() 终止读取
readAsBinaryString(file) 将文件读取为二进制编码
readAsDataURL(file) 将文件读取为DataURL编码
readAsText(file, [encoding]) 将文件读取为文本
readAsArrayBuffer(file)​​​​​​​ 将文件读取为arraybuffer
通过不同的方式读取文件
onloadstart 读取开始时触发
onprogress 读取中
onloadend 读取完成触发，无论成功或失败
onload 文件读取成功完成时触发
onabort 中断时触发
onerror 出错时触发

Web Socket

WebSocket 对象提供了一组 API，用于创建和管理 WebSocket 连接,
​​​​​​​以及通过连接发送和接收数据.
Websocket 其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已.借用了HTTP的协议来完成握手。
产生的原因：
在 HTTP/1.0 中,默认非长链接大多实现为每个请求/响应交换使用新的连接
在 HTTP/1.1 中,默认长连接一个连接可用于一次或多次请求/响应交换
HTTP协议中，服务端不能主动联系客户端，只能有客户端发起。
webSoket服务器和客户端均可主动发送数据
当Web应用程序调用new WebSocket(url)接口时，Browser就开始了与地址为url的WebServer建立握手连接的过程。
建立连接的握手

1. Browser与WebSocket服务器通过TCP握手建立连接，如果这个建立连接失败，那么后面的过程就不会执行，Web应用程序将收到错误消息通知。
2. 在TCP建立连接成功后，Browser通过http协议传送WebSocket支持的版本号，协议的字版本号，原始地址，主机地址等等一些列字段给服务器端。
3. WebSocket服务器收到Browser发送来的请求后，如果数据包数据和格式正确，客户端和服务器端的协议版本号匹配等等，就接受本次握手连接，并给出相应的数据回复，同样回复的数据包也是采用http协议传输。
4. Browser收到服务器回复的数据包后，如果数据包内容、格式都没有问题的话，就表示本次连接成功，触发onopen消息，此时Web开发者就可以在此时通过send接口向服务器发送数据。否则，握手连接失败，Web应用程序会收到onerror消息，并且能知道连接失败的原因。

创建webSocket：

var Socket = new WebSocket(url);

方法

1、Socket.send()
send(data) 方法使用连接传输数据。

2、Socket.close()
close() 方法用于终止任何现有连接

事件

注：WebSocket.org 提供了一个专门用来测试WebSocket的服务器"ws://echo.websocket.org

webSocket优点

客户端与服务器都可以主动传送数据给对方;
不用频率创建TCP请求及销毁请求，减少网络带宽资源的占用，同时也节省服务器资源;