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个整数,并传递给子线程。
在子线程中,从传入的数组中筛选幸运数字,再将数据回传到父线程。
最后,父线程将子线程回传的数据再传递给前台显示出来。