共计 3503 个字符，预计需要花费 9 分钟才能阅读完成。
一、什么是 HTML5？
HTML5 是最新的 HTML 标准；
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件；
HTML5 拥有新的语义、图形以及多媒体元素；
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建；
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行；
二、HTML5 的一些新特性
用于绘画的 canvas 元素；
用于媒介回放的 video 和 audio 元素；
对本地离线存储的更好的支持；
新的特殊内容元素，比如 article、footer、header、nav、section；
新的表单控件，比如 calendar、date、time、email、url、search；
三、video 元素
<video> 元素提供了播放、暂停和音量控件来控制视频；
<video> 元素也提供了 width 和 height 属性控制视频的尺寸；
<video> 与 </video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的；
video 元素的三种视频格式：
Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件；
MPEG4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件；
WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件；
video 元素的属性：
src：要播放的视频的 URL；
width：设置视频播放器的宽度；
height：设置视频播放器的高度；
autoplay：自动播放；
controls：如果出现该属性，则向用户显示控件，比如播放按钮；
loop：循环播放；
preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用 “autoplay”，则忽略该属性；
video 元素的方法：
pause()：暂停当前播放的视频；
play()：开始播放视频；
load()：重新加载视频元素；
canPlayType()：检测浏览器是否能播放指定的视频类型；
addTextTrack()：向音频 / 视频添加新的文本轨道；
四、audio 元素
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素；
<audio> 元素能够播放声音文件或者音频流；
audio 元素的三种音频格式：
MP3：适用于 Internet Explorer、Chrome、Safari 等浏览器；
Wav：适用于 Firefox、Opera 等浏览器；
Ogg：适用于 Firefox、IE9、Chrome 浏览器；
audio 元素的属性：
src：要播放的音频的 URL；
autoplay：自动播放；
controls：如果出现该属性，则向用户显示控件；
loop：循环播放；
preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用 “autoplay”，则忽略该属性；
audio 元素的方法：
pause()：暂停当前播放的音频；
play()：开始播放音频；
load()：重新加载音频；
五、canvas 元素
什么是 Canvas？
HTML5 的 canvas 元素通过 JavaScript 在网页上绘制图像，元素本身并没有绘制能力，它只是图形容器，必须使用脚本来绘制图形；
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法；
创建一个画布
<canvas id=”myCanvas” width=”200″ height=”100″></canvas>
Canvas 在 HTML5 中的新属性有：
height：设置 canvas 的高度；
width：设置 canvas 的宽度；
六、绘制三角形
getElementById()：可返回对拥有指定 ID 的第一个对象的引用；getContext()：返回一个用于在画布上绘图的环境，2d 表示二维绘图；beginPath()：开始一条路径，或重置当前的路径；moveTo()：把路径移动到画布中的指定点，不创建线条。lineTo()：添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）；closePath()：创建从当前点到开始点的路径；strokeStyle 属性：设置或返回用于笔触的颜色、渐变或模式；stroke()：会实际地绘制出路径；fillStyle 属性：设置或返回用于填充绘画的颜色、渐变或模式；fill()：填充当前的图像（路径），默认颜色是黑色；
// 空心三角形
var canvas=document.getElementById(“myCanvas”);
var cxt=canvas.getContext(“2d”);
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(75,100);
cxt.closePath();// 填充或闭合 需要先闭合路径才能画
cxt.strokeStyle=”red”;
cxt.stroke();
// 实心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle=”#89E1BF”
cxt.fill();
演示图
七、使用 Canvas 绘制一个空心圆
arc()：创建弧或曲线（用于创建圆或部分圆）；
<body>
<canvas id=”myCanvas” width=”200″ height=”200″ style=”border:1px solid #000;”>
</body>
<script type=”text/javascript”>
var can=document.getElementById(“myCanvas”)
var ctx=can.getContext(“2d”); // 创建 context 对象
ctx.beginPath();// 标志开始一个路径
ctx.arc(100,100,50,0,2*Math.PI);// 在 canvas 中绘制圆形
ctx.stroke()
</script>
演示图
八、绘制一个实心圆
<body>
<canvas id=”myCanvas” width=”200″ height=”200″ style=”border:1px solid #000;”>
</body>
<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.fillStyle=”#deffff”;
ctx.fill();
ctx.strokeStyle=”red”
ctx.stroke();
</script>
演示图
九、绘制一个空心矩形
strokeRect()：绘制矩形（不填色），笔触的默认颜色是黑色；
<body>
<canvas id=”myCanvas” width=”300″ height=”300″ style=”border:1px solid #000;”>
</body>
<script type=”text/javascript”>
var can=document.getElementById(“myCanvas”); // 获得画板数据
var ctx=can.getContext(‘2d’); // 获得笔刷
ctx.strokeStyle=”blue”; // 设置线条颜色
ctx.strokeRect(100,100,100,100); // 线条画矩形
</script>
演示图
十、绘制一个实心的矩形
fillRect()：绘制“已填色”的矩形，默认的填充颜色是黑色；
<body>
<canvas id=”myCanvas” width=”300″ height=”300″ style=”border:1px solid #000;”>
</body>
<script type=”text/javascript”>
var can=document.getElementById(“myCanvas”);// 获得画板数据
var ctx=can.getContext(‘2d’); // 获得笔刷
ctx.strokeStyle=”blue”; // 设置线条颜色
ctx.fillStyle=”#ddedee”; // 填充矩形
ctx.fillRect(100,100,100,100);
ctx.strokeRect(100,100,100,100);// 线条画矩形
</script>
演示图
