HTML5 API 笔记（总）上

HTML5 API 内容

1.掌握媒体元素API
2.熟练掌握Canvas绘图API
3.掌握拖放的API
4.离线应用与客户端存储
5.本地数据库sqlLite和indexedDB
6.Web Workers

第1章 媒体元素API

1）掌握媒体元素标签和属性
2）掌握自定义媒体播放器
3）掌握媒体元素标签共有方法
4）熟悉媒体元素标签共有事件

媒体元素：


在页面中嵌入：

视频播放器无法使用

音频播放器无法使用

基本属性：
src 媒体文件的路径
width video元素独有，播放器的宽度，单位：px
height video元素独有，播放器的高度，单位：px
poster video元素独有，当视频不可用时，可以使用该元素向用户展示一幅替代用的图片。
Boolean类型属性：
autoplay 自动播放
controls 用于显示或隐藏浏览器自带的播放用的控制条。带有播放、暂停等按钮。
ended 表示媒体文件是否播放完毕
loop 循环播放
muted 是否静音
paused 是否暂停
seeking 表示播放器是否正移动到媒体文件中的新位置
Number类型属性：
currentTime 已经播放的秒数
volume 取得或设置当前音量
duration 媒体的总播放时间
playbackRate 取得或设置当前的播放速度（用户可以改变）
其他属性：
preload 预加载，浏览器预先将媒体文件进行缓冲，这样可加快播放速度。
seekable 可以搜索的时间范围
played 目前为止已播放的时间
共有事件：
abort 下载中断
canplay 可以播放时，readyState值为2
error 播放媒体发生错误时该事件被激发
pause 播放已暂停
progress 正在下载
ratechange 播放媒体的速度改变
timeupdate currentTime被以不合理或意外的方式更新

---

第2章 画布API

1）掌握canvas元素的基本概念，并在页面上放置一个canvas元素，绘制出一个简单矩形
2）掌握使用路径绘制圆形与多边形
3）掌握渐变图形的绘制
4）掌握在画布中使用图像
5）掌握在画布中绘制文字，给文字加边框
6）掌握保持及恢复绘图状态的方法，保存绘制出来的图形
7）掌握在画布中制作简单动画

一、2D上下文简介：
图形上下文是一个封装了很多绘图功能的对象。

当getContext()
方法参数为“2D”的时候，获取到2D上下文。

使用2D上下文提供的方法，可以绘制简单的2D图形，比如矩形、弧线和路径。

2D上下文的坐标开始于canvas元素的左上角，原点坐标是(0,0)

二、绘制图形步骤：
1.取得canvas对象
var one = document.getElementById(“one”);
2.取得2D上下文(context)
var context = one.getContext(“2d”);
3.设定绘图样式
fillStyle 填充的样式
strokeStyle 图形边框的样式
context.fillStyle = “red”;
context.strokeStyle = “blue”;
4.指定线宽
使用图形上下文对象lineWidth
context.lineWidth = 5;
5.绘制矩形(填充与绘制边框)
fillRect 填充矩形
strokeRect 绘制矩形边框
context.fillRect(0,0,100,100);
context.strokeRect(110,0,200,100);

三、绘制矩形：
矩形是唯一一种可以直接在2d上下文中绘制的形状
fillRect(x,y,width,height);//绘制矩形
strokeRect(x,xywidth,height);//绘制矩形框
clearRect(x,y,width,height);//清除画布中的矩形框
这三个方法都能接收4个参数，矩形的起始点x坐标，y坐标，宽度，高度，单位都是像素。

四、绘制路径–圆形：
1）开始创建路径
context.beginPath();
2）设置路径（圆形）
context.arc(x,y,radius,startAngle,endAngle,countterclockwise);
参数分别为：圆心x坐标，圆心y坐标，半径，开始角度，结束角度，绘制方向（true为逆时针，false为顺时针）
3）关闭路径
context.closePath();
4）设定绘制样式，进行图形绘制
context.fillStyle = “rgba(225,0,0,0.25)”;
context.fill();//填充图形

五、绘制路径–直线：
moveTo(x,y)
将光标移动到指定坐标点，绘制直线的时候以这个这个坐标为起点。
参数：起始点x坐标，起始点y坐标
lineTo(x,y)
表示直线的重点。
参数：结束点x坐标，结束点y坐标

六、绘制路径–曲线：
bezierCurveTo(c1x,c1y,c2x,c2y,x,y)
从上一点开始绘制一条曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点。曲线会圆滑的靠近这两个控制点。
quadraticCurveTo(cx,cy,x,y)
从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy)为控制点。

七、绘制渐变：
线性渐变：
绘制线性渐变时需要使用LinearGradient对象，通过2D上下文来创建和修改。
1）创建渐变对象
var gradient = context.createLinearGradient(xstart,ystart,xend,yend);
参数：起始点x坐标，起始点y坐标，结束点x坐标，结束点坐标y坐标
2）添加渐变颜色
gradient.addColorStop(offset,color);
参数：0-1之间的偏移量，颜色值
由于是渐变，所以至少需要使用两次addColorStop()以追加两个颜色(开始颜色和结束颜色)
3）设置填充渐变
context.fillStyle = gradient;
4）使用渐变绘制矩形
context.fillRect(x,y,width,height);
径向渐变：
径向渐变是指沿着原型的半径方向向外进行扩展的渐变方式。
context.createRadialGradient(xstart,ystart,radiusStart,xend,yend,radiusend);
参数：小圆的圆心x坐标，y坐标，半径，大圆的圆心x坐标，y坐标。
小圆和大圆为同心圆，圆心坐标相同。

八、绘制变形：
绘制图形的时候，我们可能经常会想要旋转图形，或者对图形进行变形处理，
使用Canvas API的坐标轴变换处理功能，可以实现这种效果。
变形：
context.translate(x,y)
参数：在x轴上偏移的距离，在y轴上偏移的距离
扩大：
context.scale(x,y)
参数：水平方向放大的倍数，垂直方向放大的倍数
如果是缩小，将这两个参数设为0-1之间的数即可。
旋转：
rotate(angle)
参数：旋转的角度
旋转的中心点是坐标轴的原点，角度是正数顺时针方向旋转，角度是负数则逆时针方向旋转。

九、状态的保存与恢复：
save()
保存当前的绘图状态，包括当前坐标系统的状态，CanvasRenderingContext2D所设置的填充风格，线条风格，阴影风格的各种绘制状态，但是不会保存当前Canvas上绘制的图形。
restore()
恢复之前保存的绘图状态。

十、图形组合：
代码：
context.globalCompositeOperation = type;//一定要用在两个图之间
示例：
context.fillStyle = “lightblue”;
context.fillRect(100,100,200,200);
//设定组合方式
context.globalCompositeOperation = “destination-out”;
context.fillStyle = “pink”;
context.beginPath();
context.arc(150,150,100,0,Math.PI*2);
context.closePath();
context.fill();

十一、图形组合中type的取值：
source-over:
默认值，表示新图形覆盖在原有图形之上
destination-over:
在原有图形之下绘制新图形

 source-in: 
        新图形与原有图形作in运算，只显示新图形中与与原有图形相重叠的部分，新图形与原有图形的其他部分均变为透明。
          （即只显示两个图形的重叠区域）  
 destination-in: 
        新图形与原有图形作in运算，只显示原有图形中与新图形相重叠的部分，新图形与原有图形的其他部分均变为透明

 source-out: 
       新图形与原有图形作out运算，只显示新图形中与与原有图形相
             不重叠的部分，新图形与原有图形的其他部分均变为透明。
            （即只显示重叠区域以外的部分）
destination-out: 
       新图形与原有图形作out运算，只显示原有图形与新图形不重叠的部分，新图形与原有图形的其他部分均变为透明

source-atop: 
      只绘制新图形与原有图形重叠的部分、未被重叠覆盖的原有图形，新图形的其他部分变为透明。
destination-atop: 
      只绘制原有图形中被新图形重叠覆盖的部分、新图形的其他部分，原有图形中的其他部分变为透明，不绘制新图形中与原图形项重叠的部分。

lighter: 
     原有图形与新图形均绘制，重叠部分做加色处理。
xor: 
    只绘制新图形中与原图形不重叠的部分，重叠部分变为透明 。  
copy: 
    只绘制新图形，原有图形中未与新图形重叠的部分变为透明。 

十二、绘制阴影：
阴影：利用上下文对象的以下属性来绘制阴影。
shadowOffsetX 阴影的横向位移量，默认为0
shadowOffsetY 阴影的纵向位移量，默认为0
shadowColor 阴影的颜色
shadowBlur 阴影的模糊范围，一般值设定在0-10之间

十三、绘制图像：
在Html5中，不仅可以使用Canvas API绘制图形，还可以读取磁盘
或网络中的图像文件，然后使用Canvas API将该图像绘制在画布中。
1）创建图像对象
var image = new Image();
image.src = “images/a.jpg”;
2）绘制图像
context.draImage(image,x,y);
参数：图像对象，绘制的起始点坐标x，y
context.drawImage(image,x,y,w,h);
参数：图像对象，绘制的起始点坐标x，y，绘制图像的宽，高
当图像文件是一个来源于网络的比较大的图像文件时，用户就需要耐心等待图像全部加载完毕才能看到该图像，这种情况下可以使用以下方法解决：
image.onload = function(){
//绘制图像的函数
}
图像复制：
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
可以用来将画布中已绘制好的图像全部或者局部区域复制到画布中的另外一个位置上。
参数：
image:被复制的图像文件
sx,sy:表示原源图像的被复制区域在画布中的起始横坐标、纵坐标
sw,sy:表示源图像被复制区域的宽度和高度
dx,dy:表示复制后的目标图像在画布中的起始横坐标、纵坐标
dw,dh:表示复制后的目标图像的宽度和高度
图像平铺：
createPattern(image,type)
参数：image对象，平铺类型
type的取值如下：
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺
repeat 全方向平铺
返回值：pattern对象，可以为fillStyle的值
示例：
context.beginPath();
context.arc(200,150,0,Math.PI*2);
context.closePath();
context.clip();
var image = new Image();
image.src = “../images/1.jpg”;
image.onload = function(){
context.drawImage(image,0,0,400,300);
}

十四、图形裁剪：
Canvas API的图像裁剪功能是指，在画布内使用路径，只绘制该路径所包含区域内的图像，不会绘制路径外部的图像。
context.clip();
这个方法会把Canvas的当前路径裁剪下来，一旦调用了cilp方法之后，接下来向Canvas绘制图形时，之后clip()裁剪的路径覆盖的部分才会被显示出来。
示例：
context.beginPath();
context.arc(200,150,80,0,Math.PI*2);
context.closePath();
context.clip();
var image = new Image();
image.src = “../images/1.jpg”;
image.onload = function(){
context.drawImage(image,0,0,400,300);
}

十五、绘制文本：
在HTML5中，可以在Canvas画布中进行文字的绘制，同时也可以指定绘制文字的字体大小，对齐方式，文字文理填充等。
2D上下文文字修饰：
font 设置文字字体
textAlign 文本对齐方式start,end,left,right,center
textBaseline 文本的基线top,hanging,middle,alp habetic,ideographic,bottom
绘制填充或勾勒文本：
fillText(text,x,y,width) 绘制填充文本
strokeText(text,x,y,width) 向文本描边
参数：
text 表示要绘制的文字
x,y 表示绘制文字的起点横坐标与纵坐标
maxWidth 表示显示文字时的最大宽度，防止文字溢出

十六、输出位图：
canvas.toDataURL(type)
参数：type为形如“image/png”格式的MIME字符串
该方法把Canvas对应的位图编码成DataURL格式的字符串，DataURL格式是一种保存二进制文件方式，可以将图片转换为DataURL格式的字符串，也可以把DataURL格式的字符串恢复成原来的文件。
示例：
var url = canvas.toDataURL(‘image/png’);
var img1 = document.images[0];
img1.src = url;

---

第3章 拖放API

1）掌握利用拖放API将页面中的元素拖放
2）掌握DataTransfer对象的属性和方法
3）掌握拖放时的视觉效果的设定
4）掌握自定义拖放

一、拖放介绍
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。虽然在HTNL5之前已经可以使用moucedowm,mousemove,mouseup实现拖放，但是支持在浏览器内部的拖放。在html5中，任何元素都能够拖放，并且支持浏览器与其他应用程序之间的数据的相互拖放。

二、拖放实现步骤
1）拖放步骤
a. 将想要拖放的对象元素的draggable属性设为true，另外img与a元素默认允许拖放。
b. 编写与拖放相关的事件处理代码
2）拖放事件
通过拖放事件，可以控制拖放相关的各个方面。其中最关键的地方在于确定在哪里发生了拖放事件，有些事件是在被拖到的元素上触发的，有些是在放置目标上触发的。
拖动事件：
dragstart
按下鼠标并开始移动鼠标时，会在拖放的元素上触发dragstart事件。
此时光标变成了“不能放”符号（圆环中有一条反斜线），表示不能把元素放到自己上面。
可以通过ondragstart事件处理程序来运行JavaScript代码。
drag
触发dragstart事件后，随即会触发drag事件，而且在元素被拖动期间会持续触发该事件（类似mousemove事件）。
dragend
当拖放停止后（无论是把元素放到了有效地防止目标，还是放置到了无效的放置目标上）都会触发dragend事件
放置事件：
dragenter
只要有元素被拖动到放置目标上，就会触发dragenter事件（类似mouseover事件），元素被拖出了放置目标，会触发dragleave事件。
dragover
dragenter紧随其后的就是dragover事件，而且在被拖动的元素还在放置目标的范围内移动时，会持续触发该事件。
drop
将拖动元素放置到目标元素上的时候会激发。
拖放事件生命周期：
dragstart–>drag–>dragenter–>dragover–>drop–>dragend

三、自定义放置目标
有些元素不允许放置目标元素，所以需要将某个元素变成有效地放置目标。方法是重写dragover事件，阻止事件的默认行为。

四、dataTransfer对象
获取方式：
event.dataTransfer
方法：
dataTransfer.setData(key,val);
dataTransfer.getData(key);
clearData(format);
setDragImage(element,x,y);
属性：
effectAllowed
该属性与dropEffect属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示当一个元素被拖动时允许的视觉效果，仅能在dragstart事件中设定，其他事件中设置均无效。
dropEffect
用于设置目标元素将执行的操作，表示实际拖放时的视觉效果，仅能在dargover事件中指定。若属性值属于effectAllowed范围内，则鼠标指针将显示对应的指针样式，否则显示禁止的指针样式。
types
数据类型为DOMStringList，存储DataTransfer对象中所有数据项的数据类型。
items
数据类型为DOMTransferItemList，存储DataTransfer对象中所有数据项。

---

第4章 离线应用与客户端存储

1）掌握什么是离线Web应用程序
2）掌握什么是本地缓存，本地缓存与网页缓存的区别
3）掌握什么是manifest文件，并在manifest文件中指定哪些内容需要进行本地缓存，哪些不需要
/重点:/
4）掌握applicationCache对象，并使用该对象的swapCache方法进行更新本地缓存
5）掌握Web Storage的基本概念，了解sessionStorage和localStorage使用方法以及区别
6）掌握使用sessionStorage和localStorage进行数据存储，对象存储的方法

一、离线Web应用简介
离线Web应用，就是在设备不能上网的情况下，仍然可以运行的应用。前端开发者一直希望Web应用能够与传统的客户端应用同场竞技。为了让Web应用程序在离线状态时也能正常工作，就必须要把所有构成Web应用程序的资源文件，如HTML文件，CSS文件，Javascript脚本文本等放到本地缓存中，当服务器没有和Internet建立连接的时候，也可以利用本地缓存中的资源文件来正常运行Web应用程序。

二、本地缓存与浏览器网页缓存的区别
1.本地缓存是为整个Web应用程序服务的，而浏览器的网页缓存只服务于单个网页，任何网页都可以进行网页缓存，而本地缓存只缓存哪些你指定的缓存网页。
2.网页缓存是不安全，不可靠的。而本地缓存是可靠的，我们可以控制对哪些内容进行缓存，哪些不进行，开发人员开可以利用编程的手段来控制缓存的更新。

三、本地缓存
manifest文件：
1)在该文件中以清单的形式列举了需要被缓存或不需要被缓存的资源文件的文件名称，以及这些资源文件的访问路径。
2)将manifest文件引入到html文件中

3)当要对本地缓存区的内容进行修改时，只需要修改manifest文件就可以了，文件被修改后，浏览器可以自动检查manifest文件，并自动更新本地缓存区中的内容。

manifest文件示例：
  CACHE MANIFEST
  CACHE:
  other.html
  hello.js
  style.css
  index.manifest
  NETWORK:
  *
  FALLBACK:
  online.js local.js

  CACHE:  指定需要被缓存在本地的资源文件
  NETWORK: 指定不进行本地缓存的资源文件。这些资源文件只有当客户端与服务器端建立连接的时候才能访问。"*"表示没有在本manifest文件中指定的资源文件都不进行本地缓存.
  FALLBACK: 每行指定两个资源文件，第一个资源文件为能够在线访问时使用的资源文件，第二个资源文件为不能在线访问时候使用的备用资源文件

applicationCache对象：
   该对象代表了本地缓存，可以用它来通知用户本地缓存中已被更新，也允许用户手动更新本地缓存。
    事件：
         checking 在浏览器为应用缓存查找更新时触发

         updateready  当浏览器对本地缓存进行更新，装入新的资源文件时，会触发applicationCache对象的updateready事件，通知本地缓存已经被更新。用户需要手动刷新页面来得到最新版本的应用程序
         ...

    方法：
         swapCache()  用来手动立即执行本地缓存的更新，它只能在applicationCache对象的updateReady事件触发时调用

         update()   检查服务器上的manifest文件是否有更新

    属性：
       status  
          0 无缓存
          1 闲置
          2 检查中
          3 下载中
          4 更新完成

四、客户端存储
随着Web应用的出现，也产生了对于能够直接在客户端上存储用户信息能力的要求。由于cookie与IE中提供的持久化用户数据的容量限制以及数据安全问题，不能大量存储数据和安全数据，H5中提供了Web Storage。

五、Web Storage
Web Storage的两个目标
提供一种在cookie之外存储会话数据的途径
提供一种存储大量可以跨会话存在的数据的机制

Web Storage种类
sessionStorage对象
将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要保存的任何数据。(仅限当前选项卡)。
localStorage对象
将数据保存在客户端本地的硬盘设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

Storage对象提供的方法：
setItem(name,value) 为指定的name设置一个对应的值
getItem(name) 根据指定的名字name获取对应的值
removeItem(name) 删除由name指定的键值对
clear() 删除所有值
key(index) 获得index位置处的值的名字
length Storage对象中键值对的数量

window对象提供的storage事件：
当在其他页面中修改sessionStorage或者localStorage中的值时要执行的处理，可以使用window对象提供的storage事件来监听。
event.key 被修改的数据键值
event.oldValue 被修改前的值
event.newValue 被修改后的值
event.url 页面的URL地址
event.storageArea 为变动的sessionStorage对象或localStorage对象

---

第5章 本地数据库SQLLite和indexedDB

1.掌握本地数据库的基本概念
2.掌握SQLLite本地数据库的基本概念以及其使用方法
3.掌握indexedDB数据库的基本概念以及其使用方法

一、本地数据库
在HTML4中，数据库只能放在服务器端，只能通过服务器来访问数据库，但是在HTML5中，可以像访问本地文件那样轻松地对内置数据库进行访问。
在HTML5中内置了两种本地数据库，一种为“SQLLite”,可以通过SQL语言来访问的文件型SQL数据库。另外一种为“indexedDB”的NoSQL类型的数据库。到目前为止Chrome+，Opera10+，Safari5+ 的浏览器对SQLLite数据库提供支持。
1）SQLLite，可以通过SQL语言来访问的文件型SQL数据库
2）indexedDB，NoSQL类型的数据库

二、sqlLite
1.创建数据库对象
var db = opendDataBase(dbName,version,desc,size)
参数：数据库名称,版本,描述信息,大小
返回值为创建后的数据库访问对象，如果数据库不存在，则创建该数据库。
2.获取事物对象并执行SQL语句
db.transaction(function(ts){
//ts为事物对象
ts.excuteSql(sql,[],dataHandler,errorHandler);
})

三、indexedDB
该数据库是一种存储在客户端本地的NoSQL数据库。
一个网站可能有一个或多个 indexedDB数据库，每个数据库必须具有惟一的名称。一个数据库可包含一个或多个对象存储。一个对象存储(由一个名称唯一标识)是一个记录集合。每个记录有一个键 和一个值。该值是一个对象，可拥有一个或多个属性。键可能基于某个键生成器，从一个键路径衍生出来，或者是显式设置。一个键生成器自动生成惟一的连续正整数。键路径定义了键值的路径。它可以是单个Javascript标识符或多个由句点分隔的标识符。
在indexedDB-API中，对象仓库中的每一条记录均为一个具有一个或多个属性值的对象。

四、indexedDB数据库中的API
1.indexedDB【对象】：
open(name,version)
请求连接到指定的数据库，如果不存在，则创建该数据库。
deleteDatabase(name)
请求删除指定name的数据库
cmp(a,b)
比较两个值的大小，a

第6章 Web Workers

一、简介
Web Workers是HTML5新增的，用来在Web应用程序中实现后台处理的一项技术。
在使用HTML4的JavaScriptt创建出来的Web程序中，因为所有的处理都是在单线程内执行的，所以如果花费的时间比较长的话，程序界面会处于长时间没有响应的状态，等时间长到一定程度时，浏览器还会跳出一个提示脚本运行时间过长的提示框，使用户不得不中断正在执行的处理。

---

为了解决这个问题，H5新增了Worker-API，使用这个API用户可以创建在后台运行的线程，将程序交给后台运行，对用户在前台页面中执行的操作完全没有影响。

二、Web Worker的API
1.Worker【构造函数】
onmessage 监听，当在后台线程代码中调用postMessage时激发
postMessage 调用后台线程。字符串参数将赋值给后台线程中事件对象event.data
2.局限性
*不能跨域加载JS。
*worker内代码不能访问DOM。
*各个浏览器对Worker的实现不太一致，例如Firefox里允许worker中创建新的worker，而Chrome中就不行。

三、使用方式
1.编写后台执行代码
calculate.js
onmessage = function(event){
var num = event.data;
var result = 0;
for(var i = 0; i < num; i++){
result += i;
}
postMessage(result);
}

2.创建后台线程
var worker = new Worker(“calculate.js”);

3.启动后台线程
worker.postMessage(100000000);

4.设定监听，等待线程结束返回计算结果
worker.onmessage = function(event){
//处理接收到的消息
alert(event.data);
}