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 的数据存储