HTML5繪圖的應(yīng)用
Canvas API提供了基本的繪圖功能，并支持創(chuàng)建文本、直線、曲線、多邊形和橢圓，且可以設(shè)置其邊框的顏色和填充色。下面的例子用JavaSript和Canvas創(chuàng)建了一個(gè)在商業(yè)報(bào)表中常見(jiàn)的直方圖，如圖所示。其代碼如下：
<!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報(bào)表</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>
在創(chuàng)建的graph函數(shù)中，我們獲取這個(gè)圖形所需要的Canvas對(duì)象，并設(shè)置畫(huà)布的寬度和高度，然后通過(guò)循環(huán)訪問(wèn)data數(shù)組獲得相應(yīng)的數(shù)據(jù)，并繪出柱狀圖。
在代碼中，使用rgba函數(shù)設(shè)置顏色及alpha值，顏色包括紅(R),綠(G)，藍(lán)(B)，而alpha值則是顏色的透明度(代碼中為0.9，即90%)。
使用fillRect函數(shù)創(chuàng)建柱狀圖，函數(shù)的參數(shù)為矩形的起點(diǎn)(x,y)，高度和寬度：使用lineTo函數(shù)和stroke函數(shù)從當(dāng)前點(diǎn)到指定點(diǎn)之間繪制一條直線。
HTM5本地儲(chǔ)存的應(yīng)用
傳統(tǒng)的HTML使用cookie作為本地儲(chǔ)存（瀏覽器儲(chǔ)存）的方式。通過(guò)cookie可以保存用戶訪問(wèn)網(wǎng)站的信息，如個(gè)人資料等。每個(gè)cookie的格式都是“鍵/值對(duì)”(或稱為“名稱/值對(duì)”)，即<cookie名>=<值>，名稱和值必須是合法的標(biāo)示符。從Javascript的角度看，cookie就是一些字符串，可以通過(guò)document.cookie來(lái)讀取或設(shè)置這些信息。由于cookie多用在客戶端和服務(wù)器端之間進(jìn)行通信，所以除了JavaScript以外，服務(wù)器端的語(yǔ)言(如 JSP)也可以讀取cookie。
使用cookie需要注意它的如下特性：
- 每個(gè)cookie所存放的數(shù)據(jù)不能超過(guò)4KB。
- cookie是以文件形式存放在客戶端計(jì)算機(jī)中，對(duì)于客戶端的用戶來(lái)說(shuō)，這些信息可以被查看或修改，因此，通常在cookie中不能存放與安全或隱私有關(guān)的重要信息。
- cookie存在有效期。默認(rèn)情況下，一個(gè)cookie的 生命周期就是在瀏覽器關(guān)閉的時(shí)候結(jié)束，如果想要cookie在瀏覽器關(guān)掉之后還能使用，就必須為該cookie設(shè)置有效期。
- cookie通過(guò)域和路徑來(lái)設(shè)置相應(yīng)的訪問(wèn)控制通過(guò)域的設(shè)置防治不同域之間不能互相訪問(wèn)cookie信息（除非特別設(shè)置）；通過(guò)路徑的設(shè)置，使得一個(gè)網(wǎng)頁(yè)所創(chuàng)建的cookie只能被同一目錄下的其他網(wǎng)頁(yè)訪問(wèn)。
下面代碼介紹了如何設(shè)置和獲取cookie的值。cookie的值可以由document.cookie直接獲得，得到的將是以分號(hào)隔開(kāi)的多個(gè)名稱/值對(duì)所組成的字符串。代碼如下：
<script tupe="text/Javascript">
docunment.cookie="userId=828";
document.cookie="userName=hulk";
var strcookie=document.cookie;
alert(strcookie);
<script>
應(yīng)用cookie可以方便地存用戶的信息，但它本身也有明顯的缺陷和不足。例如：
- 存儲(chǔ)空間小，每個(gè)站點(diǎn)大小限制在4KB左右；
- 有時(shí)間時(shí)限，需要設(shè)置失效時(shí)間；
- 在請(qǐng)求網(wǎng)頁(yè)的時(shí)候
cookie會(huì)被附加在每個(gè)HTTP請(qǐng)求的header中，增加了流量； - 在
HTTP請(qǐng)求中的cookie是明文傳遞的，具有安全隱患。
HTML5的新標(biāo)準(zhǔn)提供了比cookie更好的本地儲(chǔ)存方案，主要包括四種：localStrong、sessionStorage、webSQL和indexDB。
1.localStorage機(jī)制###
在localStorage中保存的數(shù)據(jù)是以鍵值對(duì)作為數(shù)據(jù)結(jié)構(gòu)，他的值可以存放最大5MB的字符串。localStorage的機(jī)制會(huì)把信息存到一個(gè)sqlite類(lèi)型數(shù)據(jù)文件中，程序員可以通過(guò)sqlite打開(kāi)文件并查看期中的表和數(shù)據(jù)。下面的代碼展示了在localStorage中存放多個(gè)鍵值對(duì)的方法。
var db=getLocalStorage();
if(db){
db.setItem('author','jasonling');
db.setItem('company','Tecent');
db.setItem('introduction','A code lover!');
}
其中，if語(yǔ)句主要是為了判斷瀏覽器是否支持localStorage機(jī)制。setItem函數(shù)設(shè)置了需要保存的名稱和對(duì)應(yīng)的值。下面的代碼展示如何獲取localStorage中的值以及如何刪除鍵值對(duì)。
//取值
alert(localStorage['author']);
alert(db.getItem('company'));
//刪除
db.removeItem('company');
//清除全部鍵值對(duì)
db.clear();
需要說(shuō)明的是：localStorage的數(shù)據(jù)可以在多個(gè)頁(yè)面中共享，即不同的頁(yè)面可以訪問(wèn)相同的數(shù)據(jù)。
2.sessionStorage機(jī)制###
與localStorage機(jī)制不同，通過(guò)sessionStorage存儲(chǔ)的數(shù)據(jù)只有當(dāng)前頁(yè)面可以訪問(wèn)。對(duì)與sessionStorage中鍵值對(duì)的增、刪、改、查操作與localStorage的操作類(lèi)似，代碼如下：
var db=getSessionStorage();
if(db){
db.srtItem('author','jasonling');
db.setItem('company','Tecent');
db.setItem('introduction','A code lover!');
}
限于篇幅，其他兩種機(jī)制在本文中不作介紹
其他參考資料
