1. Canvas绘图
1.1 <canvas>标签
属性有：id style class hidden width height
<canvas>标签的定义：
<canvas id=”myCanvas” width=”200” height=”200”
Style=”border:1px solid #000”>
</canvas>
使用<canvas>标签进行绘图的步骤如下：
（1）在页面中定义<canvas>标签，并未其添加width和height属性；
（2）在JavaScript脚本中，通过document.getElementByld()等方法获得该canvas对象；
（3）调用canvas对象的getContext()方法，返回一个图形上下文对象（Graphics context）.Context对象中提供了许多绘图方法，例如getContext(“2D”)方法返回一个CanvasRendaringContext2D对象，用于绘制二维图形；
（4）调用CanvasRendaringContext2D对象中相应的绘制方法，实现绘图功能。
1.2 CanvasRenderingContext2D对象
注意：到目前为止，HTML 5 仅支持二位绘制。HTML5为将来的三位绘制预留了扩展空间，当<canvas>标签扩展到支持3D绘图时，getContext()方法可能允许传递“3D”字符串参数。
CanvasRendaringContext2D对象是HTML 5的绘制核心对象，其属性控制绘图的各种风格，属性及方法如右图所示。属性除此之外还有：
fillstyle/strokeStyle/globalCompositeOperation
方法除此之外还有：
Save()
Restore()
Rotate()
Scale()
Translate()
1.3 绘制图形
绘制矩形
方法介绍：fillRect( )方法 用于填充一个矩形区域
语法：fillRect(x,y,width,height) 参数x,y指的是矩形左上角对应的x、y坐标；参数width、height表示矩形的宽度和高度
绘制矩形边框
方法介绍：strokeRect()方法 用于绘制一个矩形边框，中心区域不进行填充
语法：strokeRect(x,y,width,height) 参数x,y指的是矩形左上角对应的x、y坐标；参数width、height表示矩形的宽度和高度
注意：当绘制矩形边框时，strokeRect属性用于设置边框的颜色和样式，lineWidth属性用于设置边框的宽度，lineJoin用于设置矩形边角的属性。
1.4绘制图像
方法介绍：drawImage()方法 用于在画布中绘制一幅图像
语法：drawImage(image,x,y)
drawImage(image, x,y,width,height)
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,
destWidth,destHeight)
参数image表示所要绘制的图像；
参数x,y表示所绘制图像的左上角的画布坐标；
参数width,height表示要绘制图像的宽度和高度，用于实现图片的缩放效果；
参数sourceX,sourceY表示在绘制图像时，从原图像的那个位置开始绘制；
参数sourceWidth,sourceHeight表示在绘制图像时，需要绘制图像的宽度和高度；
参数destX,destY表示所绘图像区域的左上角的画布坐标；
参数destWidth,destHeight表示所绘图像区域的宽度和高度。
图像加载时绘制图像：image.onload=function(){......}
图像平铺
方法介绍：（1）采用drawImage()方法来循环平铺；
（2）通过createPattern()方法来实现。
createPattern()方法用于创建一种图像平铺模式，返回一个CanvasPattern对象，该对象可用作为strokeStyle或fillStyle的属性值。
语法说明：var pattern=createPattern(image,repetitionStyle);
参数image表示索要绘制的图像
参数repetitionStyle表示平铺方式，取值为repeat（双向平铺）、repeat-x（x方向平铺）、repeat-y(y方向平铺)和no-repeat(不平铺)。
像素处理
方法介绍：getImageData()方法获得图像中的像素集合
语法说明：var imgData=context.getImageData(sourceX,sourceY,width,height);
参数sourceX,sourceY别表示为所获取区域的左上角的x、y坐标；
参数width、height分别表示所获取区域的宽度和高度；
返回值imgData是一个CanvasPixelArray对象，具有height、width、data等属性；
Data属性是一个保存香酥鸡和的数组，数据格式为“[r1,g1,b1,a1,r2,g2,b2,a2,...]”的形式，r1、g1、b1、a1分别代表第一像素的红色值、绿色值、蓝色值、透明度，以此类推。
像素的个数为data.length/4
获得图像的像素后，允许对每个像素单独进行处理。当像素处理完毕后，再通过putImageData()方法将处理过的香酥鸡和会知道画布中，其语法格式如下：
Context.putImageData(imgData,x,y,[dirtyX,dirtyY,dirtyWidth,dirtyHeight]);
1.5 绘制文字
方法介绍：fillText()方法用于填充方式绘制文字内容，strokeText()方法用于绘制文字轮廓
语法说明：fillText(text,x,y,[maxWidth]);
strokeText(text,x,y,[maxWidth]);
参数text表示所要绘制的文本；
参数x,y分别表示所绘制文本的x和y坐标；
参数maxWidth(可选)，表示允许的最大文本宽度，单位为像素。
可以使用font、textAlign、tetxBaseline属性绘制文本的字体、对其方式以及文本的基线 ，而shadowBlur、shadowColor、shadowOffsetX和shadowOffsetY属性用来设置文字阴影效果。textBaseline属性的取值范围为alphabetical、top、hanging、middle、ideographic和bottom。
1.6 绘制路径
方法介绍：beginPath()、closePath()、isPointInPath()、lineTo()、moveTo()、fill()、和stroke()等
绘制路径时，首先获得图形上下文对象Context，然后根据以下步骤进行绘制：
1）开始创建路径；
2）创建图形路径；
3）路径创建完成后，关闭路径；
4）设定绘制样式，调用绘制方法，绘制路径。
1.7绘制圆弧
方法介绍：arc()方法使用了一个圆点和半径的方式绘制一条圆弧路径。
srcTo()方法使用切点和半径的方式绘制一条圆弧路径。
语法说明：src(x,y, radius,startAngle,endAngle,counterClockWise)
参数x、y分别表示所绘制的圆弧的圆心的X、y坐标
参数radius表示圆弧的半径；
参数startAngle表示沿着圆指定弧的开始点的角度；
参数endAngle表示沿着圆指定弧的结束点的角度；
参数counterClockWise表示弧是沿着圆周的逆时针方向（true）还是顺时针方向（false）
srcTo(x1,y1,x2,y2,radius)
参数x1,y1分别是点p1的x、y坐标，p0p1为圆弧的切线，P0为切点；
参数x2,y2分别是点P2的x、y坐标，P1P2为圆弧的切线，P2为切点
1.8 绘制渐变图形
线性渐变：Line Gradient 是指沿着一条直线设定要用的若干颜色，颜色之间形成渐变色。在绘制线性渐变时，
方法介绍：可以通过createLinearGradient()方法来获得一个LinearGradient对象。
语法说明：var gradient=content.createLinearGradient(xStart,yStart,xEnd,yEnd)
参数： xStart和yStart分别表示渐变的起始点的x和y坐标；
参数： xEnd和yEnd分别表示渐变的结束点的x和y坐标。
添加渐变色：addColorStop()方法向渐变线添加各种渐变色。
gradient.addColorStop(0,”red”);
gradient.addColorStop(0.5,”yellow”);
上述代码中，第一个参数表示在渐变线上的相对位置，取值为[0-1].第二个参数表示该位置设定的渐变颜色。
径向渐变：radial gradient是指沿着圆形的半径方向向外进行扩散的渐变方式。在绘制径向渐变时，可以通过createRadialGradient()方法来获得一个RadialGradient对象
语法说明：context.createRadialGradient(xStart,yStart,radiusStart)
参数xStart和yStart表示起点圆的x和y坐标；
参数radiusStart表示起点圆的半径；
参数xEnd和yEnd表示终点圆心的x、y坐标。
参数radiusEnd表示终点圆的半径
分别指定了两个圆的大小和位置，从第一个圆心处开始向外渐变扩散，直到第二个圆的外轮廓为止。
设定颜色时，也使用addColorStop()方法进行添加。
1.9 圆形坐标变换
通过平移、缩放和旋转的方式来实现这些效果
平移：方法介绍：translate()方法实现用于实现坐标轴原点的移动
语法说明：context.translate(tx,ty)
参数tx取正数时，表示将坐标原点向右移动tx个单位；
参数ty取正数时，表示将坐标原点向下移动ty个单位；
参数tx、ty取负数时，表示将坐标原点向左向上移动相应的单位；
缩放：方法介绍：scale()方法用于将图形放大或缩小
语法说明：context.scale(sx,sy)
参数sx取值大于1时，表示在水平方向上放大的倍数；
参数sy取值大于1时，表示在垂直方向上放大的倍数；
参数sx、sy取值在0-1之间时，表示在水平方向和垂直方向上缩小的程度。
旋转：方法介绍：rotate()方法用于以坐标轴原点为旋转中心对图形进行旋转
语法说明：context.rotate(angle)
参数angle表示旋转的角度；
参数angle取正数时，表示顺时针方向旋转；
参数angel取负数时，表示逆时针方向旋转。
2 多媒体播放
<video/><audio/>标签，可以直接在浏览器中播放视频和音频文件，无需事先在浏览器上安装任何插件。属性如下
3 web存储
HTML4 通过cookie功能来实现，它自身也存在一些缺点：
1）cookie的大小被限制在4KB以内；
2）Cookie会随着http请求一起向服务器发送，重复多次发送会导致带宽的浪费；
3）Cookie信息在网络传输过程中并未进行加密，存在一定的安全隐患；
4）Cookie的操作相对比较复杂。
HTML 5通过web Storage和本地数据库来实现。Web Storage 存储机制是针对HTML 4中cookie 存储机制的一种改善；而本地数据库是HTML 5中一个新增的功能，用于在客户端本地创建一种改善；而本地数据库是HTML 5 中一种新增的功能，用于在客户端本地创建一个数据库，将原来保存在服务器数据库中的数据直接在保存子啊客户端本地，大大减轻了服务器端的压力，提高了数据访问速度。
Web storage 用于在客户端本地保存数据，主要包含一下两种数据存储形式。
1) session storage。将数据保存在session对象中，session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经历的时间，即用户浏览该网站所花费的时间。Session 对象用于保存用户浏览网站这段时间内所需要保存的任何数据，当用户会话失效时，session storage保存的数据也随之丢失。
2) Local storage。将数据保存在客户端的硬件设备中，当浏览器关闭后，数据任然保存。在下次打开浏览器访问页面时仍然可以继续使用，除非用户或程序显式地清除该数据， 否则数据将一直存在。
3.1 storage 接口
sessionStorage和localStorage 对象都是storage接口的实例，两者对应的属性和方法基本相同，区别在于保存数据的生命周期不同。
语法格式如下：
Interface Storage{
Readonly attribute unsigned long length;
DOMString?key(unsigned long index);
Getter DOMString?getItem(DOMString,DOMString value);
Deleter void removeItem(DOMString key);
Void clear();
}
其中，length属性用于返回storage中保存的key/value键值对的数量；
Key(index)方法用于返回storage中第index个key；
getItem(key)方法用于返回storage中指定key对应的value值；
Set(key,value)方法用于向storage存入指定的key/value键值对；
removeItem(key)方法用于将storage中删除指定key对应的key/value键值对；
Clear()方法用于删除storage中所有的key/value键值对；
3.2 Session Storage
注意：后续关于storage的示例可采用chrome浏览器进行测试。
3.3 local storage
Local Storage与Session Storage语法基本相同，都是以key/value键值对的方式来存放数据，区别在于localStorage中的数据存放时间更加持久。
当要存放更加复杂的数据时，可以借助JSON对数据进行封装，然后再进行存储。
使用JavaScript提供的JSON.stringify()方法将JSON对象转成JSON字符串，然后将JSON字符串保存到Local Storage中；当读取数据时，再通过JSON.parse()方法将JSON字符串转成JSON对象，然后在页面中进行显示。
4 本地数据库
HTML 5 中内置了两种本地数据库：SQLlist和indexedDB。SQLlist数据库是一种通过SQL语言进行访问的稳健性SQL数据库，indexedDB数据库是一种轻量级NOSQL数据库。
4.1 SQList数据库
方法介绍：SQList数据库是一个开源的嵌入式关系数据库，时间了自包容、零配置和支持事务的SQL市局哭引擎。与其他数据库管理系统不同的是，SQLlist的安装和运行非常简单，占用资源也非常少，在嵌入式设备中只需要几百KB的内存。
在HTML 5中，通过JavaScript和SQLlist数据库进行访问的具体步骤为：
1）创建数据库访问对象；
2）使用事务处理。
语法说明：var db=openDatabase(databaseName,versionmdescription,size);
参数databaseName表示数据库的名称；
参数 version 表示数据库的版本号；
参数 description表示数据库的描述；
参数 size表示数据库的大小；
该方法返回一个数据库访问对象，当数据库不存在时，则创建一个新数据库并返回一个数据库访问对象。
实例：创建一个数据库对象:var db =opendatabase(“goodsdb”,”1.0”,”walking Fashion E&S Database”,2*1024*1024);
方法介绍：当访问数据库时，需要事务来完成数据库的访问操作，有效避免其他用户同时进行操作所产生的干扰。食物分为只读事务和读写事务，只读事务使用readTranslation()方法实现数据的查询操作，读写事务使用transaction()方法来实现数据更新及表的基本操作。
语法说明： db.transaction(function(tx){
Tx.executesql(sqlString,[params],
Function(tx,ty){
//数据操作成功，数据处理
}，
Function(tx,error){
//数据操作失败，提醒信息
}
)；
});
其中，对象db表示数据库访问对象；
参数tx表示事务处理对象；
Executesql()方法用于执行SQL语句。参数sqlString表示被执行的SQL语句；
Params参数(可选)，表示执行SQL语句时所需要的参数数组；第三个参数是一个回调函数，当成功执行SQL语句时调用；第四个参数是一个回调函数，当执行SQL语句出错时调用。
示例：
Db.transaction(function(tx){
Tx.executesql(“select*from goods”);
})
4.2 IndexedDB数据库
与web storage相比，indexedDB更具有优势，包括索引、事务处理以及更加健壮的查询功能。
indexedDB是一种轻量级NoSQL数据库，与传统的关系型数据库不同，它通过数据仓库实现对数据的存取，数据库可以包含一个或多个对象仓库，每个仓库是一个记录集合。在对象仓库中，数据以key/value键值对的形式进行保存，每一个数据都有对应的健民，且键名不能重复，每条记录由键和值两部分组成。使用的具体步骤如下：
1）打开IndexedDM数据库，并且开启了一个事务（transaction）；
2）创建一个对象仓库（object Store);
3）执行数据库的相关操作；
4）通过监听DOM事件等待操作完成；
5）根据操作结果进一步操作。
代码初始化
Var indexedDB=window.indexedDB || window.webitIndexedDB || window.mozIndexedDB || window.msIndexDB;
打开数据库
方法介绍： 通过IndexedDB对象的open()方法打开数据库。当数据库存在时，返回一个请求连接数据库的请求对象(IDBOpenDBRequest)；当数据库不存在时，辉县创建一个数据库并返回该数据库的请求对象。Open()方法的语法格式如下：
Var dbRequest=indexedDB.open(dbName,dbVersion);
其中，参数dbName表示数据库名称；
参数dbversion 表示数据库的版本；
通过请求对象dbRequest的onsuccess事件（或onerror事件）来指定数据库连接成功（或失败）时执行的时间来处理函数。
示例：监听请求对象的事件，并进行处理。
Var dbRequest=indexedDB.open(“MyDataBase”.1);
//数据库连接成功，所执行的事件处理函数
dbRequest.onerror=function(e){
Var id=e.target.result;//获取连接成功时的数据库对象
Alert(“数据库连接成功。”);
};
//数据库连接失败时所执行的错误处理函数
dbRequest.onerror=function(e){
Alert(“数据库连接失败。”);
}
//数据版本更新时所执行的事件处理函数
dbRequest.onupgradeneeded=function(e){
Var tx=e.target.transaction;
Alert(“数据库版本更新成功！版本”+e.oldVersion+”=>版本”+e.newVersion);
};
上述代码通过open()方法获得一个数据库的请求连接对象，当请求成功时触发onsuccess事件，当请求失败是触发onerror事件，当请求的数据库版本高于数据库当前版本时触发onupgradeneeded(版本更新)事件，该事件用于对数据库版本进行更新，数据库版本号的类型为unsigned long long, 可以是一个非常大的整数，但不能使浮点数。
创建对象仓库
与关系型数据库不同的是，IndexedDB数据库使用对象仓库（又称为对象存储空间）来存放数据，一个数据库中可以包含任意数量的对象仓库。
语法说明：var store=idb.createobjectStorage(storageName,optionalParameters);
其中：对象idb表示某个已连接好的数据库对象；
参数storeName表示对象仓库名称；
参数optionalParameters(可选)，是JSON对象类型，用于设置记录中的主键信息。
示例：创建一个对象仓库：
Var storeName=”users”;
Var optionalParameters={
keyPath:”id”, //用于指定对象仓库中的记录使用那个属性作为该记录的主键
autoIncrement:true //true表示主键自动增长，否则在添加数据时，需要指明主键的值
};
Var store=idb.createaObjectStore(storeName,optionalParameters);
使用事务
数据操作只能在事务中被执行，当事务处理过程中出现异常时，整个事务操作都将被取消。事务被分为三类：版本更新事务（onupgradeneeded）、只读事务（readonly）和读写事务（readwrite）。
开启一个事务：var tx=idb.transaction(storage,[mode]);
其中，对象idb表示某个已连接的数据库对象；
参数storeName是一个数据仓库名，或者是由数据仓库名组成的字符串数组；
参数mode(可选)，用语定义事务的读写属性取值包括readonly和readwrite、
示例：事务开启及监事事务处理结果
//开启读写事务
Var tx=idb.transaction(‘users’,’readwrite’);
//事务结束时所要执行的处理（事务结束时触发）
Tx.oncomplete=function(){
Alert(“数据保存成功”);
};
//事务终止时所要执行的处理（事务终止时触发）
Tx.onabort=function(){
Alert(“数据保存失败”)；
}
数据保存
在数据仓库中保存数据时，首先获得数据库访问对象IndexedDB,然后使用该对象的transaction()方法开启一个读写事务，并使用事务对象的objectStore()方法获得对象仓库。
语法说明：
Var objectStore=tx.objectStore(storeName);
其中，对象tx表示具有读写属性的事务对象；
参数storeName表示某个数据仓库。
最后，调用对象仓库的add()和put()方法实现数据的保存。当使用put()方法保存数据时，如果主键在对象仓库中存在，则将主键对应的数据进行更新；如果主键不存在，则将数据保存到对象仓库中。当使用add()方法保存数据是，如果主键在数据仓库中存在数据则保存将失败，并返回错误信息。
示例:
Var user={
Username:’guoqy’,
Age:20,
};
Var tx=idb.transaction(‘users’,’readwrite’);
Var objectstore=tx.objectstore(‘users’);
Objectstore.add(user);
数据遍历
方法介绍：当遍历数据时，使用openCursor()方法获取游标对象，然后通过游标的移动来实现数据的遍历。
示例：数据遍历过程
Var request=objectStore.openCursor();
Reques.onsuccess=function(e){ //检索数据的请求执行成功时触发
Var cursor=e.target.result;
If(cursor){
Alert(cursor.value.userName); //获取游标中的内容
Cursor.continue(); //继续检索
Else{
Console.log(“检索结束！”)；
}}；
Request.onerror =function(e){
Console.log(“检索失败！”);
};
5. Web Worker
通过多线程的方式将执行时间较长的程序段交由后台线程处理，从而不影响用户在前台的页面操作。
Web Worker技术多用于的场合：
1）预先抓取数据缓存本地，以供后期使用；
2）后台I/O处理；
3）大数据分析或计算处理；
4）Canvas会谈中的图形数据运算及生成处理；
5）本地数据库中的数据存取及计算处理。
5.1 Worker基本应用
方法介绍：创建一个Worker对象（即后台线程）语法如下：
语法说明：Var Worker=new Worker(URL);
方法介绍：通过worker对象向后台线程发送消息使用postMessage() 语法如下：
语法说明：Var.postMessage(message);
方法说明：通过监听worker对象的onmessage事件接受后台线程回传的数据并进行处理，语法说明：
Worker.onmessage=function(e){
Alert(e.data); //从后台线程接收到的数据
}
监听到worker对象onmessage事件后，在事件处理函数中对回传的数据进行处理。当onmessage事件处理完并且其他外部脚本也执行完毕后，浏览器仍然继续监听worker对象，知道被终止为止。
方法说明：终止web worker对象
语法说明：worker.terminate();
5.2 worker 线程嵌套
通过线程的嵌套将一个较大的后台线程切分为多个子线程，每一个子线程各自完成相对独立的一部分工作。
示例：
页面向后台线程发送和接受数据，并将最终结果以表格的方式显示出来。在后台线程中随机生成一个整数数组，并筛选其中的幸运数字。
在父线程中随机生成100个整数，并传递给子线程。
在子线程中，从传入的数组中筛选幸运数字，再将数据回传到父线程。
最后，父线程将子线程回传的数据再传递给前台显示出来。