HTML5项目实例

HTML5项目实例

一、卧龙首页

二、Canvas画图
canvas 元素用于在网页上绘制图形。

1. 基本图形、曲线的绘制
   (1) 画直线
   (2) 画三角形
   (3) 画矩形
   (4) 画圆形
   (5) 画二次、三次贝塞尔曲线

// 定义一个画图区域 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成<canvas id="andy" width="400px” height="200px” style="border: 1px solid black;">如果你看到了这段文字，说明你需要升级浏览器了</canvas>
<br><input type="button" value="清空" onclick="clearCanvas()">

<script type="text/javascript">

    var canvas = document.getElementById('andy');
    // 判断浏览器是否支持canvas
    if(canvas.getContext) {
        console.log('支持Canvas');
    }else {
        console.log('不支持Canvas');
    }

    // 返回一个HTML5对象CanvasRenderingContext2D对象
    // canvas 2d上下文，绘画工具
    var context = canvas.getContext('2d');

    // 路径边缘样式
    context.strokeStyle = '#ff0000';
    // 填充样式
    context.fillStyle = '#ff0000';
      // 线宽        context.lineWidth = 10;    
     // 画直线        // 开始路径        context.beginPath();
     // 起点 （画布上的点）
     context.moveTo(0, 0);
     // 终点
     context.lineTo(200, 100);
     // 描边画线
     context.stroke();        // 结束路径        context.closePath();    

     // 三角形
     context.beginPath();
     context.moveTo(40, 40);
     context.lineTo(80, 80);
     context.lineTo(0, 80);        // 可自动关闭路径        context.closePath();                // 描边划线
     context.stroke();        // 填充
     //context.fill();

     // 填充 矩形         context.beginPath();        //1. 线 起始位置x,y 以及宽高//      context.strokeRect(100,50,200,100);        // 2.填充
 //  context.fillRect(100, 50, 200, 100);
    // 3.自己设置线还是填充
     context.rect(0, 0, 100, 100);
     context.closePath();
     context.fill();

     // 画圆
     // 开始一个路径
     context.beginPath();
     // 制定弧的路径  圆心，半径，开始弧度，结束弧度，是否顺时针
     context.arc(200, 100, 50, 0, Math.PI * 2, true);
     // 结束一个路径
     context.closePath();
     // 填充
     //context.fill();
     // 画线
     context.stroke();

     // 贝塞尔曲线
     // 二次贝塞尔曲线 （一个控制点 控制弧的形状）
     var pointX = 75;
     var pointY = 55;

     context.beginPath();        // 起始位置
     context.moveTo(0, 200);        // 前两个参数是控制点 后面的参数是结束为止
     context.quadraticCurveTo(pointX, pointY, 400, 200);
     context.stroke();
        // 演示控制点的作用
     context.beginPath();
     context.moveTo(0, 200);
     context.lineTo(pointX, pointY);
     context.lineTo(400, 200);
     context.stroke();


    // 三次贝塞尔曲线 （两个控制点）
    var pointX1 = 55;
    var pointY1 = 55;
    var pointX2 = 85;
    var pointY2 = 55;

    context.beginPath();
    context.moveTo(0, 200);
    context.bezierCurveTo(pointX1, pointY1, pointX2, pointY2, 400, 200);
    context.stroke();
    //演示控制点
    context.beginPath();
    context.moveTo(0, 200);
    context.lineTo(pointX1, pointY1);
    context.lineTo(pointX2, pointY2);
    context.lineTo(400, 200);
    context.stroke();

    function clearCanvas() {            // 清空画布
        context.clearRect(0, 0, canvas.width, canvas.height);
    }

</script>2. Canvas状态的保存与恢复<canvas id="andy" width="400" height="600" style="border: 1px solid black"></canvas>

<script type="text/javascript">

    // 获取Canvas
    var canvas = document.getElementById('andy');
    // 获取上下文
    var context = canvas.getContext('2d');

    // 第一次设置轮廓样式和填充样式
    context.strokeStyle = 'red';
    context.fillStyle = 'yellow';

    // 画第一个矩形
    context.fillRect(20, 20, 100, 50);
    context.strokeRect(20, 20, 100, 50);

    // 保存Canvas状态 保存的内容有颜色设置 宽度设置 平移旋转 缩放设置等
    context.save();

    // 第二次设置轮廓样式和填充样式
    context.strokeStyle = 'blue';
    context.fillStyle = 'green';
    // 话第二个矩形
    context.fillRect(140, 20, 100, 50);
    context.strokeRect(140, 20, 100, 50);

//    context.save();
//    context.restore();

    // 取出保存的状态
    context.restore();

    // 画第三个矩形
    context.fillRect(20, 90, 100, 50);
    context.strokeRect(20, 90, 100, 50);

</script>3. 变换 - 位移、旋转与缩放(1) 位移<canvas id="andy" width="800" height="600" style="border: 1px solid black"></canvas>

<script type="text/javascript">

    // 获取Canvas
    var canvas = document.getElementById('andy');
    // 获取上下文
    var context = canvas.getContext('2d');

    draw();

    function draw() {
        for(var i = 0; i < 8; i++) {
            // 在做任何变换之前，最好先保存状态
            context.save();
            // 位移
            context.translate(100 * i, 0);
            drawHouse();
            // 恢复状态
            context.restore();
        }
    }

    function drawHouse() {
        context.fillStyle = 'yellow';
        context.strokeStyle = 'black';
        context.beginPath();
        context.moveTo(50, 80);
        context.lineTo(80, 100);
        context.lineTo(20, 100);
        context.closePath();
        context.fill();
        context.stroke();

        context.fillStyle = 'red';
        context.fillRect(30, 100, 40, 30);
        context.strokeRect(30, 100, 40, 30);
    }
</script>(2) 旋转context.rotate(Math.PI / 4 * i);(3) 缩放context.scale(1.5, 1.5);【时钟小项目】<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ADClock</title>
</head>
<body>
<div class="clock-area" style="text-align: center;">
    <canvas id="clock" width="500px" height="500px" style="margin: 0 auto;">你的浏览器不支持canvas画图</canvas>
</div>

<script type="text/javascript">

    var canvas = document.getElementById("clock");
    var context = canvas.getContext("2d");

    function drawClock() {
        // 清空画布
        context.clearRect(0, 0, canvas.width, canvas.height);

        // 画表盘
        // 画笔颜色
        context.strokeStyle = "#32353b";
        // 画笔宽度
        context.lineWidth = 8;
        // 一条线的开始
        context.beginPath();
        // x, y, 半径, 开始角度, 结束角度
        context.arc(250, 250, 200, 0, 360);
        // 画一条线
        context.stroke();
        // 结束该条画线
        context.closePath();

        // 时刻度
        for (var i = 0; i < 12; i++) {
            drawLine("#32353b", 4, 250, 250, 30 * i * Math.PI / 180, 0, -175, 0, -195);
        }
        // 分刻度
        for (var i = 0; i < 60; i++) {
            drawLine("#32353b", 4, 250, 250, 6 * i * Math.PI / 180, 0, -185, 0, -195);
        }
        // 获取时分秒
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        hour > 12 ? hour - 12 : hour;
        hour += minute / 60;

        // 时针
        drawLine("#250f0c", 6, 250, 250, 30 * hour * Math.PI / 180, 0, -145, 0, 10);
        // 分针
        drawLine("#433a00", 4, 250, 250, 6 * minute * Math.PI / 180, 0, -155, 0, 10);
        // 秒针
        drawLine("#FF0000", 2, 250, 250, 6 * second * Math.PI / 180, 0, -165, 0, 10);

        //显示时间
        context.font = "18px 微软雅黑";
        context.lineWidth = 2;
        context.fillStyle = "#0000FF";
        hour=date.getHours();
        var str = hour > 10 ? hour + ":" + (minute > 10 ? minute : ("0" + minute)) : ("0" + hour) + ":" + (minute > 10 ? minute : ("0" + minute));
        context.fillText(str, 225, 380);

        //中国制造
        context.font = "12px 宋体";
        context.lineWidth = 1;
        context.fillText("Made In China", 210, 400);
    }

    function drawLine(style, width, centerX, centerY, rotate, fromX, fromY, toX, toY) {
        context.save();
        context.strokeStyle = style;
        context.lineWidth = width;
        // 设置画笔位置
        context.translate(centerX, centerY);
        // 旋转
        context.rotate(rotate);
        context.beginPath();
        context.moveTo(fromX, fromY);
        context.lineTo(toX, toY);
        context.stroke();
        context.closePath();
        //把原来状态恢复回来
        context.restore();
    }
    // 画表盘
    drawClock();
    setInterval(drawClock, 1000);
</script>

</body>
</html>三、音频与视频 — 之前主要是Flash等插件来播放1.基本使用<!--(1)音频播放，自动播放，控制按钮--><!--<audio src="http://7xpx8d.com1.z0.glb.clouddn.com/adhaoxiangni.mp3" autoplay controls>你的浏览器不支持</audio>-->// 浏览器对音频格式的支持性不同
<audio autoplay controls>
    <source src="http://7xpx8d.com1.z0.glb.clouddn.com/adhaoxiangni.mp3" type="audio/mp3"/>
    <source src="http://7xpx8d.com1.z0.glb.clouddn.com/adhaoxiangni.ogg" type="audio/ogg"/>
    <source src="http://7xpx8d.com1.z0.glb.clouddn.com/adhaoxiangni.wav" type="audio/wav"/>
    你的浏览器不支持音频播放
</audio>
<video src="http://7xpx8d.com1.z0.glb.clouddn.com/Larva.mp4" controls loop preload="auto" poster="Resources/1111.png"></video>

3.页面播放器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<style type="text/css">
    * {margin: 0; padding: 0;}
    body {background: url("../Resources/forenoon.jpg") no-repeat;}
    button {
        width: 60px;
        height: 30px;
    }
    #toggle {
        position: absolute;
        left: 20%;
        top: 80%;
    }
    #next {
        position: absolute;
        left: 26%;
        top: 80%;
    }
    #currentSection {
        text-align: center;
        vertical-align: middle;
        margin-top: 160px;

    }
    #currentSection img {
        margin: auto;
    }
</style>

<section id="currentSection">
    <img src="../Resources/song.jpg">
</section>
<div id="music_area">
    <audio id="music">
        <source src="http://7xpx8d.com1.z0.glb.clouddn.com/adhaoxiangni.mp3" type="audio/mp3"/>
        你的浏览器不支持音频播放
    </audio>
</div>

<button id="toggle" onclick="toggleSound()">播放</button>
<button id="next" onclick="nextOne()">下一首</button>

<input id="range" onchange="change()" type="range" max="10000" min="0" value="0" style="width: 100%; position: absolute; bottom: 1%;">


<script type="text/javascript">

    var music = document.getElementById('music');
    var range = document.getElementById('range');
    var music_area = document.getElementById('music_area');
    window.onload = function () {
        // 播放时间监听
        music.addEventListener('timeupdate', function(){
            range.value = music.currentTime / music.duration * range.max;
        });
        // 播放结束监听
        music.addEventListener('ended', function(){
            nextOne();
        });
    }
    // 播放&暂停
    function toggleSound() {
       var toggle = document.getElementById('toggle');
       if(music.paused) {
           music.play();
           toggle.innerHTML = '暂停';
       }else {
           music.pause();
           toggle.innerHTML = '开始';
       }
        // var audio = document.createElement('audio');audio.src = 'http://7xpx8d.com1.z0.glb.clouddn.com/adBWhatUWannaB.mp3';audio.play();document.body.appendChild(audio);
    }
    // 下一首
    function nextOne() {
        music_area.innerHTML = '<audio id="music" loop><source src="http://7xpx8d.com1.z0.glb.clouddn.com/adBWhatUWannaB.mp3" type="audio/mp3"/>你的浏览器不支持音频播放</audio>';
        music = document.getElementById('music');
        music.addEventListener('timeupdate', function(){
            range.value = music.currentTime / music.duration * range.max;
        });
        range.value = 0.0;
        music.play();
    }
    // 进度条修改播放进度
    function change() {
        var progress = range.value / range.max;
        music.currentTime = progress * music.duration;
    }
</script>

</body>
</html>

四、Web存储
在HTML5之前，HTML4使用的是Cookie存储机制。Cookie是HTML4中在客户端存储简单用户信息的一种方式，它使用文本来存储信息，当有应用程序使用Cookie时服务器就会发送Cookie给客户端，客户端浏览器将保存该信息，下一次页面请求时，客户端浏览器就会把Cookie发送到服务器。典型的应用就是用来保存用户信息，用户设置，密码记忆等。

Web存储
1.会话存储 sessionStorage 存储简单数据
类似于字典键值对
// 存值
sessionStorage.setItem(‘name’,’xiaoming’);
// 取值
var value = sessionStorage.getItem(‘name’);
【作用】1.页面传值 2.简单数据的存储

2.本地存储 locationStorage
类似于字典键值对
// 存值
localStorage.setItem(‘name’,’xiaoming’);
// 取值
var value = localStorage.getItem(‘name’);

【注意】locationStorage存储的数据没有时间限制，而sessionStorage当用户关闭浏览器后，数据会被删除

3.Web SQL数据库 Web SQL Database
SQL Database 规范中定义的三个核心方法：
. openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象
. transaction：这个方法允许我们根据情况控制事务提交或回滚 最好把数据库操作写在其中，如果其中有一点数据库代码出现错误，之前的代码就会回滚，不生效
. executeSql：这个方法用于执行SQL 查询

openDatabase方法打开已经存在的数据库，如果不存在将会创建一个数据库
参数分别是：数据库的名称，版本，数据库的描述和数据大小，首次创建数据库回调函数(可选)
var db = window.openDatabase(“mydatabase”, “1.0”, “我的数据库描述”, 20000);

transaction
transaction方法用以处理事务，当一条语句执行失败的时候，整个事务回滚。方法有三个参数
. 包含事务内容的一个方法
. 执行成功回调函数（可选）
. 执行失败回调函数（可选）

executeSql
executeSql方法用以执行SQL语句，返回结果，方法有四个参数
. 查询字符串 sql语句
. 用以替换查询字符串中问号的参数
. 执行成功回调函数（可选） 两个参数context和result
. 执行失败回调函数（可选）

<script type="text/javascript">

    // 打开数据库
    var db = window.openDatabase('myDB', '1.0', '我的数据库', 2000, function(){
        alert('第一次创建回调方法');
    });
    if(!db) {
        alert("数据库打开失败！");
    } else {
        alert("数据库打开成功！");
    }

    // 创建表
    var sql = 'create table if not exists DEMO (ID integer primary key autoincrement, NAME varchar(32) not null, AGE integer, NOTE varchar(64))';
    db.transaction(function(context){
        context.executeSql(sql);
    }, function() {
        alert('失败回调');
    }, function() {
        alert('成功回调');
    });

    // 执行更新操作
    db.transaction(function(context){
        context.executeSql('insert into demo (AGE) values (18)');
    }, function() {
        alert('失败回调');
    }, function() {
        alert('成功回调');
    });

    // 执行查询操作
    db.transaction(function(context){
        context.executeSql('select * from demo where ID=?', [1], function(context, result){                    // result查询结果中，有一个关键的属性，rows
            for(var i = 0; i < result.rows.length; i++) {
                alert(result.rows[i]['NAME']);
            }
        }, function() {
            alert('查询失败');
        });
    });

</script>

说明】W3C已经不推荐使用WEB SQL, 推崇indexedDB

五、地理位置
1.获取地理位置
在HTML5的API标准中，可以通过navigator.geolocation来获取设备的当前位置，返回一个位置对象，用户可以从这个对象中得到一些经纬度的相关信息。
navigator.geolocation的三个方法：
(1) getCurrentPosition() // 获取当前位置
(2) watchPosition() // 监听用户位置
(3) clearWatch(watchID) // 清除监听

(1) getCurrentPosition()
使用方法：navigator.geolocation.getCurrentPosition(successCallback, [errorCallback] , [positionOptions]);
【successCallback】获取定位成功时执行的回调函数
function(position){
alert(“纬度：”+position.coords.latitude+”；经度：”+position.coords.longitude)
};
successCallback返回一个地理数据对象position作为参数，该对象有属性timestamp和coords。timestamp表示该地理数据创建时间（时间戳）；coords包括另外七个属性：
　　1. coords.latitude：估计纬度
　　2. coords.longitude：估计经度
　　3. coords.altitude：估计高度
　　4. coords.accuracy：所提供的以米为单位的经度和纬度估计的精确度
　　5. coords.altitudeAccuracy：所提供的以米为单位的高度估计的精确度
　　6. coords.heading： 宿主设备当前移动的角度方向，相对于正北方向顺时针计算　　 7. coords.speed：以米每秒为单位的设备的当前对地速度

【errorCallback】定位失败时执行的回调函数  function(error){    alert(error.message);}errorCallback返回一个错误数据对象error作为参数，该对象有属性：

　　1.code :表示失败原因，返回1 or 2 or 3 ，具体为
　　　　PERMISSION_DENIED (数值为1) 表示没有权限使用地理定位API
　　　　POSITION_UNAVAILABLE (数值为2) 表示无法确定设备的位置，例如一个或多个的用于定位采集程序报告了一个内部错误导致了全部过程的失败
　　　　TIMEOUT (数值为3) 表示超时
2.message :错误提示内容

【positionOptions】用来设置定位属性，positionOptions拥有三个属性enableHighAccuracy:boolean timeout:longmaximumAge:longenableHighAccuracy 【true or false(默认)】是否返回更详细更准确的结构，默认为false不启用，选择true则启用，但是会导致较长的响应时间及增加功耗，这种情况更多的用在移动设备上。timeout 设备位置获取操作的超时时间设定（不包括获取用户权限时间），单位为毫秒，如果在设定的timeout时间内未能获取位置定位，则会执行errorCallback()返回code（3）。如果未设定timeout，那么timeout默认为无穷大，如果timeout为负数，则默认timeout为0。maximumAge 设定位置缓存时间，以毫秒为单位，如果不设置该值，该值默认为0，如果设定负数，则默认为0。该值为0时，位置定位时会重新获取一个新的位置对象；该值大于0时，即从上一次获取位置时开始，缓存位置对象，如果再次获取位置时间不超过maximumAge，则返回缓存中的位置，如果超出maximumAge，则重新获取一个新的位置。

(2) watchPosition() // 监听用户位置
(3) clearWatch() // 清除监听

// 参数1.定位成功回调函数，position参数
    //        position参数中包含了用户的位置信息
    var successCallBack = function (position) {
        var coor = position.coords;
        document.write('纬度: ' + coor.latitude + '<br>');
        document.write('经度: ' + coor.longitude + '<br>');
    }
    // 参数2.定位失败回调函数，error参数，errorCode，message
    var failCallBack = function (error) {
        document.write('定位出错:' + error.errorCode + error.message)
    }
    // 参数3.定位属性的设置(可选)  定位精确度
    var options = {
        // 是否启用高精确度定位，默认为false
        enableHighAccuracy : true,
        // 超时时间
        timeout : 5000,
        // 位置信息缓存保留时长
        maximumAge : 100000
    };
//    navigator.geolocation.getCurrentPosition(
//            successCallBack,
//            failCallBack,
//            options
//    );

    // 位置信息的监听，会不断监听用户的位置
    // watchPosition 和 getCurrentPosition参数完全一致
    var watchID = navigator.geolocation.watchPosition(successCallBack, failCallBack, options);

    // 清除监听
    navigator.geolocation.clearWatch(watchID);2.显示位置if (window.navigator.geolocation) {
    var options = {
        enableHighAccuracy: true
    };
    window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);
} else {
    alert("浏览器不支持html5来获取地理位置信息");
}

function handleSuccess(position)
{
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
            +latlon+"&zoom=14&size=800x600&sensor=false";

    document.getElementById("map").innerHTML="<img src='"+img_url+"' />";
}

function handleError(error)
{
    switch(error.code)
    {
        case error.PERMISSION_DENIED:
            x.innerHTML="User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML="Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML="The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML="An unknown error occurred."
            break;
    }
}