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

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

矩形
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渐变：
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");

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>

在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，即requestAnimationFrame，顾名思义就是请求动画帧。 为了深入理解 requestAnimationFrame 背后的原理，我们首先需要了解一下与之相关的几个概念：
1、屏幕刷新频率
对于一般笔记本电脑，屏幕刷新频率为1000ms 60fps -> 16ms 平均每16ms刷新一次页面，刷新频率受屏幕分辨率、屏幕尺寸和显卡的影响。
2、setTimeout
利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个原因：
（1）setTimeout的执行时间并不是确定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，所以 setTimeout 的实际执行时机一般要比其设定的时间晚一些。
（2）刷新频率受屏幕分辨率和屏幕尺寸的影响，不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。
以上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象。
丢帧现象即，屏幕刷新之前，定时器执行了两次，导致屏幕刷新一次，走了2px（假设想让他一次走1px）；

3、requestAnimationFrame
系统每次刷新之前会主动调用requestAnimationFrame中的回调函数
兼容函数：

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

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

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值改变的时候触发，常用于构建单页面应用

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

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

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

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

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

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
则返回用户可以跳转的时间段

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标签里面才能使用，用来加载多个资源。为了兼容多类型浏览器

1.创建可拖动元素

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

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)

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

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消息，并且能知道连接失败的原因。

var Socket = new WebSocket(url);

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

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

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