HTML5(一)学习HTML5新特性

浏览数：23 / 时间：2015年06月09日

一、HTML5有哪些新特性

1.用于媒体播放的<audio>、<video>

2.用于绘画的<canvas>

3.更好的支持本地离线存储

4.新的特殊内容元素,如：article、header、footer、nav等

5.新的表单控件，如：calendar、date、time、email、url、search

二、音频和视频播放

1.简单的音频播放和视频播放

 <video width="100%" height="80%" src="./media/CoolShow_02.mp4" controls="controls">你的浏览器不支持该标签</video>
    <audio src="./media/My_Destiny.mp3" controls="controls">你的浏览器不支持该元素</audio>

上面的controls属性使用的是<video>和<audio>自带的播放控件，如播放控制、声音控制、全屏控制等。

2.格式问题

由于不同的浏览器支持的播放格式不同，如何实现在不同的浏览器上使用相同的代码?

html5提供了<resource>标签，可以同时提供多套视频格式，浏览器会自动使用第一个能识别的视频格式。

  <video width="320" height="240" controls="controls">
             <source src="movie.ogg" type="video/ogg">
             <source src="movie.mp4" type="video/mp4">
                             你的浏览器不支持该标签
        </video>

3.自定义按钮实现播放/暂停、画面大小控制。

<script type="text/javascript">
    var myVideo = document.getElementById("video1");
    function playPause() {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }
    function makeBig() {
        myVideo.width = 560;
    }
    function makeSmall() {
        myVideo.width = 320;
    }
    function makeNormal() {
        myVideo.width = 420;
    }
</script>

4.视频编解码工具

1)编解码工具

    FFmpeg

    官网：www.ffmpeg.org

    下载：http://ffmpeg.zeranoe.com/builds/

2)使用命令行进行转码

    指令，进入需要转码的文件的路径

    cd D:\a

    然后，执行转码指令

    D:\a>D:\ffmpeg\bin\ffmpeg -i a.mp3 -acodec libvorbis b.mp4

    D:\ffmpeg\bin\ffmpeg：为下载的转码工具的路径

三、拖拽

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div1 {
            width: 488px;
            height: 370px;
            background-color: #aaaaaa;
        }
        img {
            width: 200px;
            height: 200px;
        }
    </style>
    <script type="text/javascript">
        function allowDrop(ev) {
            ev.preventDefault();
        }
        //设置拖拽对象，以id的形式进行标记
        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }
       //取得对象，存放
        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");//获得要拖拽的元素的id
           // ev.target.appendChild(document.getElementById("drag1"));
           ev.target.appendChild(document.getElementById(data));//2种都可以
        }
    </script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br/>
<img id="drag1" src="header.jpg" draggable="true" ondragstart="drag(event)"/>
</body>
</html>

四、canvas绘画

canvas元素本身是没有绘图能力的，所有的绘制工作必须在js中完成。
1.绘制线条

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #FF0000;">
    Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");//创建context对象，起始坐标（0,0）
    cxt.moveTo(10, 10);//moveTO：移动画笔，不连线
    cxt.lineTo(150, 50);//lineTo：连线
    cxt.lineTo(10, 50);
    cxt.lineTo(10,10);
    cxt.stroke();
</script>
</body>
</html>

2.绘制圆形，填充

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";    //填充颜色
    cxt.beginPath();
     //参数分别为：圆心坐标x,y,半径，起始弧度，和终止弧度
    cxt.arc(70,38,35,4,Math.PI*2,true); //填充的参数
    cxt.closePath();
    cxt.fill();//完成填充
</script>
</body>
</html>

3.绘制渐变色，使用渐变色进行填充

<!DOCTYPE HTML>
<html>
<body>
	<canvas id="myCanvas" width="200" height="100"
		style="border: 1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>
	<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    var grd = cxt.createLinearGradient(0, 0, 180, 30);//与渐变有关的一些参数值
    grd.addColorStop(0, "#FF0000");//起始颜色
    grd.addColorStop(1, "#00FF00");//结束颜色
    cxt.fillStyle = grd;    //将渐变色设置为填充颜色
    cxt.fillRect(0, 0, 175, 60);//填充区域
</script>
</body>
</html>

五、SVG

和canvas相似，区别在于SVG绘制的图是可伸缩的矢量图，不依赖与分辨率。

1.绘制五角星

<!DOCTYPE HTML>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200">
    <polygon points="100,10,40,180,190,60,10,60,160,180"
             style="fill:lime;stroke: purple;stroke-width:5;fill-rule: evenodd;">
    </polygon>
</svg>
</body>
</html>

六、Geolocation地理定位