自己的学习记录，有什么不对的望指正。
新元素
1. canvas 新元素
<canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
2. 新多媒体元素
<audio> 定义音频内容
<video> 定义视频（video 或者 movie）
<source> 定义多媒体资源 <video> 和 <audio>
<embed> 定义嵌入的内容，比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
3. 新表单元素
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出，比如脚本的输出。
4. 新的语义和结构元素
<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command> 定义命令按钮，比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框，比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释（中文注音或字符）。
<rt> 定义字符（中文注音或字符）的解释或发音。
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节（section、区段）。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
Canvas
1. 基本使用
-
var c=document.getElementById("myCanvas"); -
var ctx=c.getContext("2d");
2. 矩形
fillRect( x , y , width , height) 填充以(x,y)为起点宽高分别为width、height的矩形 默认为黑色
stokeRect( x , y , width , height) 绘制一个空心以(x,y)为起点宽高分别为width、height的矩形
clearRect( x, y , width , height ) 清除以(x,y)为起点宽高分别为width、height的矩形 为透明
3. 路径
beginPath() 新建一条路径一旦创建成功 绘制命令将转移到新建的路径上
moveTo( x, y ) 移动画笔到(x , y) 点开始后面的绘制工作
closePath() 关闭该路径 将绘制指令重新转移到上下文
stroke() 将绘制的路径进行描边
fill() 将绘制的封闭区域进行填充
4. 圆弧
arc( x , y , r , startAngle , endAngle , anticlosewise )
以(x,y)为圆心 r为半径的圆 绘制startAngle弧度 到endAngle弧度的圆弧 anticlosewise默认为false 即顺时针方向 true为逆时针方向
arcTo( x1 , y1 , x2 , y2 , radius )
根据 两个控制点 (x1,y1) 和 (x2, y2)以及半径绘制弧线 同时连接两个控制点
5. 贝塞尔曲线
- 二次贝塞尔曲线
quadraticCurveTo( cp1x, cp1y , x ,y ) // (cp1x,cp1y) 控制点 (x,y)结束点
- 三次贝塞尔曲线
bezierCurveTo( cp1x, cp1y ,cp2x , cp2y ,x , y )//（cp1x,cp1y）控制点1 (cp2x,cp2y) 控制点2 (x,y)结束点
6. 样式添加
fillStyle = color color 可以为颜色值、渐变对象(并非样式！！！！)
strokeStyle = color color 可以为颜色值、渐变对象(并非样式！！！！)
lineWidth = value 线宽
lineCap = type （butt 、 round 、square）线条末端样式 依次是方形、圆形&突出、方形&突出
lineJoin = type （round 、bevel 、 miter）线条交汇处样式 依次是圆形、平角 、 三角形
ctx.setLineDash([ 实际长度 , 间隙长度 ]) 虚线 setLineDash接受数组
ctx.lineDashOffet 设置偏移量
7. 渐变
var gradient = ctx.createLinearGradient( x1 ,y1 ,x2 ,y2); 线性渐变
var gradient = ctx.createRadialGradient(x1 ,y1 ,r1 ,x2 ,y2 ,r2); 径向渐变
gradient.addColorStop( position , color ) position:相对位置0~1 color:该位置下的颜色
8. 透明度
ctx.globalAlpha = value (0~1)
9. 文本
fillText( text , x , y , [,maxWidth]) 在(x,y)位置绘制text文本 最大宽度为maxWidth(可选)
strokeText( text ,x ,y ,[,maxWidth]) 在(x,y)位置绘制text文本边框 最大宽度为maxWidth(可选)
font = value eg:"100px sans-serif"
10. 绘制图片
drawImage( image , x , y , width , height ) image为图片对象、从(x,y)处放置宽高分别为width height的图片
drawImage( image , sx , sy , swidth , sheight ,dx ,dy ,dwidth ,dheight) 切片前四个是定义图像源的切片位置和大小 后四个是定期切片的目标显示位置大小
11. 状态保存 恢复
save()
restore()
12.动作
translate( x , y ) 将canvas原点的移动到 (x,y) （save&restore保存初始状态！！！）
rotate( angle ) 顺时针方向旋转坐标轴 angle弧度
scale(x,y) 将图形横向缩放x倍、纵向缩放y倍 （ x、y大于1是放大 小于1为缩放！！！）
13. 全局合成操作
globalCompositeOperation = type;
type值有:
source-over、source-in、source-out、source-atop、destination-over、
destination-in、destination-out、destination-atop、xor、copy
14. 裁剪
clip 只显示裁剪区域内部区域 (使用save & restore 存储canvas状态！！！)
15. 动画
clearRect() 清空画布
save&restore 保存恢复canvas状态
svg
1. 标签
矩形 rect
圆形 circle
椭圆 ellipse
线 line
折线 polyline
多边形 polygon
路径 path
文本 text
2. 属性
宽度 width
高度 height
css样式 style
填充色 fill
边框颜色 stroke
边框宽度 stroke-width
边框首尾 stroke-linecap
线条样式 stroke-dasharray (需要填写线条宽度以及线条间隙 依据顺序填写一个循环)
线条每一段的起始偏移量 stroke-dashoffet
填充透明度 fill-opacity
边框 stroke-opacity
图形填充规则 fill-rule （nonzero evenodd）
动作 transform （中心点为图像左上角,并且只支持2d变换
HTML5 MathML
MathML指“数学标记语言”，是XML语言的一个子集，用来在web网页，甚至部分软件中显示数学公式。
简言之，就是使用特殊的类似HTML的标记在网页中显示数学公式。
HTML5 拖放（Drag 和 Drop）
1. 拖放的流程
选中 ---> 拖动 ---> 释放
2. 选中
draggable属性：设置元素是否可拖动。语法：<element draggable="true | false | auto" >
true: 可以拖动
false: 禁止拖动
auto: 跟随浏览器定义是否可以拖动
3. 拖动
每一个可拖动的元素，在拖动过程中，都会经历三个过程，拖动开始-->拖动过程中--> 拖动结束
| 针对对象 | 事件名称 | 说明 |
|---|---|---|
| 被拖动的元素 | dragstart | 在元素开始被拖动时候触发 |
|drag | 在元素被拖动时反复触发
|dragend | 在拖动操作完成时触发
目的地对象 |dragenter| 当被拖动元素进入目的地元素所占据的屏幕空间时触发 |agover |当被拖动元素在目的地元素内时触发 |dragleave| 当被拖动元素没有放下就离开目的地元素时触发
4. 释放
| 针对对象 | 事件名称 | 说明 |
|---|---|---|
| 目的地对象 | drop | 当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。 |
5. DataTransfer对象
| 属性 | 说明 |
|---|---|
| types | 只读属性。它返回一个我们在dragstart事件中设置的拖动数据格式的数组。 格式顺序与拖动操作中包含的数据顺序相同。IE10+、Edge、safari3.1、Firefox3.5+ 和Chrome4以上支持该属性 |
| files | 返回拖动操作中的文件列表。包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件，此属性是一个空列表。 |
| dropEffect | 获取当前选定的拖放操作的类型或将操作设置为新类型。它应该始终设置成effectAllowed的可能值之一【none、move、copy、link】。dragover事件处理程序中针对放置目标来设置dropEffect。 |
| effectAllowed | 指定拖放操作所允许的效果。必须是其中之一【 none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized】默认为uninitialized 表示允许所有的效果。ondragstart处理程序中设置effectAllowed属性 |
| 方法 | 说明 |
|---|---|
| void setData(format, data) | 将拖动操作的拖动数据设置为指定的数据和类型。format可以是MIME类型 |
| String getData(format) | 返回指定格式的数据，format与setData()中一致 |
| void clearData([format]) | 删除给定类型的拖动操作的数据。如果给定类型的数据不存在，此方法不执行任何操作。如果不给定参数，则删除所有类型的数据。 |
| void setDragImage(img, xOffset, yOffset) | 指定一副图像，当拖动发生时，显示在光标下方。大多数情况下不用设置，因为被拖动的节点被创建成默认图片。x,y参数分别指示图像的水平、垂直偏移量 |
HTML5 Geolocation（地理定位）
地理位置 API 通过window.navigator.geolocation提供
1. 获取当前定位
navigator.geolocation.getCurrentPosition(success, error, options)
success:成功的回调函数(必须)
error:错误的回调函数
options:参数对象，通过该对象参数设置最长可接受的定位返回时间，等待请求的时间和是否精准定位。
2. success(Geoposition)
Geoposition 对象属性
accuracy 定位精准度，单位 m
altitude 海拔
altitudeAccuracy 海拔精准度，单位 m
heading 方向
latitude 纬度
longitude 经度
speed 速度
timestamp 响应的日期/时间
3. error(PositionError)
PositionError 对象属性
用户拒绝 code === 1
获取不到 code === 2
连接超时 code === 3
4. config
const config = {
// 是否需要高精度位置 默认为false
enableHighAccuracy: true,
// 请求超时时间，默认为 infinity，单位ms
timeout: 1000,
// 位置信息过期时间，设置为0就无条件获取新的地理位置信息，默认为 0，单位 ms
maximumAge: 0
};
5. watchPosition 监听位置变化
navigator.geolocation.watchPosition(); 参数与 getCurrentPosition 相同
用于注册监听器，在设备的地理位置发生改变的时候自动被调用
在 watchPosition 方法定义使用后，则会不停的获取用户的地理位置信息，不停的更新用户的位置信息
6. clearWatch
clearWatch() - 停止 watchPosition() 方法
HTML5 新的 Input 类型
color 用在input字段主要用于选取颜色
date 允许你从一个日期选择器选择一个日期
datetime 允许你选择一个日期（UTC 时间）
datetime-local 允许你选择一个日期和时间 (无时区).
email 用于应该包含 e-mail 地址的输入域
month 允许你选择一个月份
number 用于应该包含数值的输入域
range 用于应该包含一定范围内数字值的输入域
search 用于搜索域，比如站点搜索或 Google 搜索
tel 定义输入电话号码字段
time 允许你选择一个时间
url 用于应该包含 URL 地址的输入域
week 允许你选择周和年
HTML5 新的表单元素
<datalist> 规定输入域的选项列表
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出，比如脚本的输出。
HTML5 新的表单属性
1. <form>新属性
autocomplete 规定 form 或 input 域应该拥有自动完成功能
novalidate Boolean 规定在提交表单时不应该验证 form 或 input 域
2. <input>新属性
| 属性 | 说明 |
|---|---|
| autocomplete | 规定 form 或 input 域应该拥有自动完成功能 |
| autofocus Boolean | 规定在页面加载时，域自动地获得焦点 |
| form | 规定输入域所属的一个或多个表单 |
| formaction | 用于描述表单提交的URL地址 会覆盖 <form> 元素中的action属性注意: 用于 type="submit" 和 type="image" |
| formenctype | 描述了表单提交到服务器的数据编码 只对form表单中 method="post" 表单 覆盖 form 元素的 enctype 属性 主要: 该属性与 type="submit" 和 type="image" 配合使用 |
| formmethod | 定义了表单提交的方式(覆盖了 <form> 元素的 method 属性注意:该属性可以与 type="submit" 和 type="image" 配合使用 |
| formnovalidate Boolean | 描述了 <input> 元素在表单提交时无需被验证覆盖 <form> 元素的novalidate属性注意:formnovalidate 属性与type="submit一起使用 |
| formtarget | 指定一个名称或一个关键字来指明表单提交数据接收后的展示 覆盖 <form>元素的target属性注意: formtarget 属性与type="submit" 和 type="image"配合使用. |
| height 与 width | 规定用于 image 类型的 <input> 标签的图像高度和宽度注意: height 和 width 属性只适用于 image 类型的 <input> 标签 |
| list | 规定输入域的 datalist。datalist 是输入域的选项列表 |
| min 与 max | 用于为包含数字或日期的 input 类型规定限定（约束） 注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。 |
| multiple Boolean | 规定<input> 元素中可选择多个值注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file |
| pattern (regexp) | 描述了一个正则表达式用于验证 <input> 元素的值 注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password |
| placeholder | 提供一种提示（hint），描述输入域所期待的值 |
| required Boolean | 规定必须在提交之前填写输入域（不能为空） 注意:required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file |
| step | 输入域规定合法的数字间隔 |
HTML5 应用程序缓存
1. 优势
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
2. 启用缓存
在文档的<html> 标签中包含 manifest 属性
每个指定了 manifest 的页面在用户对其访问时都会被缓存。
如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）
manifest 文件的建议的文件扩展名是：".appcache"
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置
3. Manifest 文件
CACHE MANIFEST(必需) - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
4. 更新缓存
- 一旦应用被缓存，它就会保持缓存直到发生下列情况：
用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存
5. 注意
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。
为了确保浏览器更新缓存，您需要更新 manifest 文件。
浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）
HTML5 Web Workers
什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
HTML5 服务器发送事件(Server-Sent Events)
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。
HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
1. 创建 WebSocket 对象
var Socket = new WebSocket(url, [protocol] );
以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
2. WebSocket 属性
| 属性 | 描述 |
|---|---|
| Socket.readyState | 只读属性 readyState 表示连接状态，可以是以下值： 0 - 表示连接尚未建立。 1 - 表示连接已建立，可以进行通信。 2 - 表示连接正在进行关闭。 3 - 表示连接已经关闭或者连接不能打开。 |
| Socket.bufferedAmount | 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。 |
3. WebSocket 事件
| 事件 | 事件处理程序 | 描述 |
|---|---|---|
| open | Socket.onopen | 连接建立时触发 |
| message | Socket.onmessage | 客户端接收服务端数据时触发 |
| error | Socket.onerror | 通信发生错误时触发 |
| close | Socket.onclose | 连接关闭时触发 |
4. WebSocket 方法
| 方法 | 描述 |
|---|---|
| Socket.send() | 使用连接发送数据 |
| Socket.close() | 关闭连接 |
