HTML5绘图的应用
Canvas API提供了基本的绘图功能，并支持创建文本、直线、曲线、多边形和椭圆，且可以设置其边框的颜色和填充色。下面的例子用JavaSript和Canvas创建了一个在商业报表中常见的直方图，如图所示。其代码如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width;inital-scale=1.0;maxium-scale=1.0;user-scalable=0;"/>
<title>HTML5报表</title>
<script type="text/javascript">
function graph(report,maxWidth,maxHeight){
var data=report.values;
var canvas=document.getElementById("graph");
var axisBuffer=20;
canvas.height=maxHeight+100;
canvas.width=maxWidth;
var ctx=canvas.getContext("2d");
var width=50;
var buffer=20;
var i=0;
var x=buffer+axisBuffer;
ctx.font="bold 12px 宋体";
ctx.textAlign="start";
for(i=0;i<data.length;i++){
ctx.fillStyle="rgba(0,0,200,0.9)"
ctx.fillRect(x,maxHeight-(data[i][report.y]/2),width,(data[i][report.y]/2));
ctx.fillStyle="rgba(0,0,0,0.9)"
ctx.fillText(data[i][report.x],x+(width/4),maxHeight+15);
x+=width+buffer;
}
//draw the horizontal axis
ctx.moveTo(axisBuffer,maxHeight);
ctx.lineTo(axisBuffer+maxWidth,maxHeight);
ctx.strokeStyle="black";
ctx.stroke();
//draw the vertical axis
ctx.moveTo(axisBuffer,0);
ctx.lineTo(axisBuffer,maxHeight);
ctx.stroke();
//draw gridlines
var lineSpacing=50;
var numLines=maxHeight/lineSpacing;
var y=lineSpacing;
ctx.font="10px 宋体";
ctx.textBaseline="middle";
for(i+0;i<numLines;i++){
ctx.strokeStyle="rgba(0,0,0,0.25)";
ctx.moveTo(axisBuffer,y);
ctx.lineTo(axisBuffer+maxWidth,y);
ctx.stroke();
ctx.fillStyle="rgba(0,0,0,0.75)";
ctx.fillText(""+(2*(maxHeight-y)),0,y);
y+=lineSpacing;
}
}
function init(){
var data=[{year:"2010年",sales:50},
{year:"2011年",sales:150},
{year:"2012年",sales:300},
{year:"2013年",sales:400}];
var report={
x:"year",
y:"sales",
values:data
};
graph(report,350,300);
}
</script>
</head>
<body onload="init()">
<canvas id="graph"></canvas>
</body>
</html>
Canvas创建的直方图
在创建的graph函数中，我们获取这个图形所需要的Canvas对象，并设置画布的宽度和高度，然后通过循环访问data数组获得相应的数据，并绘出柱状图。
在代码中，使用rgba函数设置颜色及alpha值，颜色包括红(R),绿(G)，蓝(B)，而alpha值则是颜色的透明度(代码中为0.9，即90%)。
使用fillRect函数创建柱状图，函数的参数为矩形的起点(x,y)，高度和宽度：使用lineTo函数和stroke函数从当前点到指定点之间绘制一条直线。
HTM5本地储存的应用
传统的HTML使用cookie作为本地储存（浏览器储存）的方式。通过cookie可以保存用户访问网站的信息，如个人资料等。每个cookie的格式都是“键/值对”(或称为“名称/值对”)，即<cookie名>=<值>，名称和值必须是合法的标示符。从Javascript的角度看，cookie就是一些字符串，可以通过document.cookie来读取或设置这些信息。由于cookie多用在客户端和服务器端之间进行通信，所以除了JavaScript以外，服务器端的语言(如 JSP)也可以读取cookie。
使用cookie需要注意它的如下特性：
- 每个cookie所存放的数据不能超过4KB。
- cookie是以文件形式存放在客户端计算机中，对于客户端的用户来说，这些信息可以被查看或修改，因此，通常在cookie中不能存放与安全或隐私有关的重要信息。
- cookie存在有效期。默认情况下，一个cookie的 生命周期就是在浏览器关闭的时候结束，如果想要cookie在浏览器关掉之后还能使用，就必须为该cookie设置有效期。
- cookie通过域和路径来设置相应的访问控制通过域的设置防治不同域之间不能互相访问cookie信息（除非特别设置）；通过路径的设置，使得一个网页所创建的cookie只能被同一目录下的其他网页访问。
下面代码介绍了如何设置和获取cookie的值。cookie的值可以由document.cookie直接获得，得到的将是以分号隔开的多个名称/值对所组成的字符串。代码如下：
<script tupe="text/Javascript">
docunment.cookie="userId=828";
document.cookie="userName=hulk";
var strcookie=document.cookie;
alert(strcookie);
<script>
应用cookie可以方便地存用户的信息，但它本身也有明显的缺陷和不足。例如：
- 存储空间小，每个站点大小限制在4KB左右；
- 有时间时限，需要设置失效时间；
- 在请求网页的时候
cookie会被附加在每个HTTP请求的header中，增加了流量； - 在
HTTP请求中的cookie是明文传递的，具有安全隐患。
HTML5的新标准提供了比cookie更好的本地储存方案，主要包括四种：localStrong、sessionStorage、webSQL和indexDB。
1.localStorage机制###
在localStorage中保存的数据是以键值对作为数据结构，他的值可以存放最大5MB的字符串。localStorage的机制会把信息存到一个sqlite类型数据文件中，程序员可以通过sqlite打开文件并查看期中的表和数据。下面的代码展示了在localStorage中存放多个键值对的方法。
var db=getLocalStorage();
if(db){
db.setItem('author','jasonling');
db.setItem('company','Tecent');
db.setItem('introduction','A code lover!');
}
其中，if语句主要是为了判断浏览器是否支持localStorage机制。setItem函数设置了需要保存的名称和对应的值。下面的代码展示如何获取localStorage中的值以及如何删除键值对。
//取值
alert(localStorage['author']);
alert(db.getItem('company'));
//删除
db.removeItem('company');
//清除全部键值对
db.clear();
需要说明的是：localStorage的数据可以在多个页面中共享，即不同的页面可以访问相同的数据。
2.sessionStorage机制###
与localStorage机制不同，通过sessionStorage存储的数据只有当前页面可以访问。对与sessionStorage中键值对的增、删、改、查操作与localStorage的操作类似，代码如下：
var db=getSessionStorage();
if(db){
db.srtItem('author','jasonling');
db.setItem('company','Tecent');
db.setItem('introduction','A code lover!');
}
限于篇幅，其他两种机制在本文中不作介绍
其他参考资料
网友评论