Html5笔记之第二天

video:controls 属性供添加播放、暂停和音量控件。

<video width="320" height="0" controls="controls" autoplay="autoplay" loop="loop">    <source src="video/demo.ogg" type="video/ogg"></video>
audio 元素能够播放声音文件或者音频流
<audio src="video/demo.ogg" controls="controls">    Your browser does not support the audio tag.</audio>

canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
JavaScript 使用 id 来寻找 canvas 元素

<canvas id="myCanvas" width="200" height="100">    <script type="text/javascript">        var c = document.getElementById("myCanvas");        var cxt = c.getContext("2d");        cxt.fillStyle = "#FF0000";        cxt.fillRect(0, 0, 150, 75);    </script></canvas><hr/><canvas id="MyLine" width="200" height="100">    <script type="text/javascript">        var c = document.getElementById("MyLine");        var cxt = c.getContext("2d");        cxt.fillStyle = "#FF0000";        cxt.moveTo(10, 10);        cxt.lineTo(150, 50);        cxt.lineTo(10, 50);        cxt.stroke();    </script></canvas><hr/><canvas id="myCircle" width="200" height="100">    <script type="text/javascript">        var c = document.getElementById("myCircle");        var cxt = c.getContext("2d");        cxt.fillStyle = "#FF0000";        cxt.beginPath();        cxt.arc(70, 18, 15, 0, Math.PI * 2, true);        cxt.closePath();        cxt.fill();    </script></canvas><hr/><canvas id="myCanvass">    <script type="text/javascript">        var c = document.getElementById("myCanvass");        var cxt = c.getContext("2d");        var grd = cxt.createLinearGradient(0, 0, 175, 50);        grd.addColorStop(0, "#FF0000");        grd.addColorStop(1, "#00FF00");        cxt.fillStyle = grd;        cxt.fillRect(0, 0, 175, 50);    </script></canvas><hr/><canvas id="image">    <script type="text/javascript">        var c = document.getElementById("image");        var cxt = c.getContext("2d");        var img = new Image();        img.src = "image/logo.jpg";        cxt.drawImage(img, 10, 0);    </script></canvas><hr/>

HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储 
sessionStorage - 针对一个 session 的数据存储