#JavaScript在HTML5中的应用

2017-12-16  本文已影响0人  李俊汶

HTML5绘图的应用

Canvas API提供了基本的绘图功能,并支持创建文本、直线、曲线、多边形和椭圆,且可以设置其边框的颜色和填充色。下面的例子用JavaSriptCanvas创建了一个在商业报表中常见的直方图,如图所示。其代码如下:

<!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的值。cookie的值可以由document.cookie直接获得,得到的将是以分号隔开的多个名称/值对所组成的字符串。代码如下:

<script tupe="text/Javascript">
    docunment.cookie="userId=828";
    document.cookie="userName=hulk";
    var strcookie=document.cookie;
    alert(strcookie);
<script>

应用cookie可以方便地存用户的信息,但它本身也有明显的缺陷和不足。例如:

HTML5的新标准提供了比cookie更好的本地储存方案,主要包括四种:localStrongsessionStoragewebSQLindexDB

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!');
    }    

限于篇幅,其他两种机制在本文中不作介绍
其他参考资料

  1. 前端储存方式
上一篇 下一篇

猜你喜欢

热点阅读