一、总结
一句话总结：
video：HTML5视频标签。
audio：html5音频标签。
canvas：绘制路径、矩形、圆形、字符以及添加图像。
svg：可伸缩矢量图形 (Scalable Vector Graphics)。
二、video、audio、canvas和svg元素
1、video
video：HTML5视频标签 .
目前由于专利、商业竞争等原因各个浏览器对视频的支持格式各不相同，但是这个支持是动态变化的。
当前，video 元素支持三种视频格式：
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
支持的浏览器有：Firefox、Opera、Chrome
- MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
支持的浏览器有：IE9+、Chrome、Safari
虽然目前应用较广，单有专利保护，是收费在
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
支持的浏览器有：Chrome、Opera、Safari
专门为网页传播而设计在，清晰度高，压缩率也很高，并且开源免费，未来可能会成为主流。目前国外大在视频网站很多采用
video元素的属性
属性 | 属性值 | 描述 |
src | url | 要播放的视频的 URL地址。 |
width | 正整数/百分比 | 设置视频播放器的宽度。 |
height | 正整数/百分比 | 设置视频播放器的高度。 |
autoplay | 空值/autoplay | 视频在就绪后自动播放。 |
loop | 空值/loop | 循环播放。 |
controls | 空值/controls | 向用户显示控件，比如播放按钮 |
video简单实例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <video width="640" controls autoplay>
9 <source src="22m.mp4" type="video/mp4">
10 您的浏览器不支持 video 属性。
11 </video>
12 </body>
13 </html>
2、audio
audio：html5音频标签
HTML5在不使用插件的情况下支持音频格式文件的播放，当然支持格式是有限的
当前，audio 元素支持三种音频格式：
- Ogg 免费, 支持的浏览器:Firefox、Opera、Chrome
- MP3 收费, 支持的浏览器: IE9+、Chrome、Safari
- Wav 收费, 支持的浏览器: Firefox、Chrome、Safari
audio元素的属性
属性 | 属性值 | 描述 |
src | url | 要播放的 音频的 URL地址。 |
controls | 空值/controls | 向用户显示控件，比如播放按钮 |
autoplay | 空值/autoplay | 音频在就绪后自动播放。一般不设置该属性。 |
loop | 空值/loop | 循环播放。 |
preload | auto/none/metadata | 音频在页面加载时是否进行加载，并预备播放。一般不需要设置，使用默认值即可。 |
audio简单实例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Audio简单测试</title>
6 </head>
7 <body>
8 <audio controls>
9 <source src="test.mp3" type="audio/mpeg">
10 您的浏览器不支持该音频格式。
11 </audio>
12 </body>
13 </html>
3、canvas
什么是canvas
HTML5的canvas元素是HTML5技术标准中最令人振奋的功能之一。它提供了一套强大的图形API，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。让开发者能够制作从文字处理到电子游戏的各类应用程序。由与canvas的操作需要用到JavaScript知识，而我们现在还没有讲到JavaScript，所以本章中我们只是学习canvas的基础操作。但是再后续课程中我们讲完JavaScript之后仍然会对canvas进行进一步的深入学习
canvas简单实例
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="UTF-8">
5 <title>绘制扇形</title>
6 <style type="text/css">
7 canvas{background: #A9A9A0;margin-left: 200px}
8 </style>
9 </head>
10 <body>
11 <canvas id="canvas" width="800" height="600">
12 您浏览器暂不支持HTML5的canvas元素
13 </canvas>
14 <script type="text/javascript">
15 var canvas=document.getElementById('canvas');
16 var c=canvas.getContext('2d');
17 c.lineWidth=6;
18 c.strokeStyle="FFA500";
19 c.fillStyle="#FFA500";
20 c.moveTo(400,500)
21 c.arc(400,500,300,Math.PI*7/6,Math.PI*1.5,false)
22 //c.stroke();
23 c.beginPath();
24 c.moveTo(400,500);
25 c.arc(400,500,300,Math.PI*11/6,Math.PI*7/6,true);
26 //c.stroke();
27 c.fill()
28 c.beginPath();
29 c.fillStyle="#A9A9A0"
30 c.arc(400,500,150,Math.PI*7/6,Math.PI*1.5,false)
31 //c.stroke();
32 c.beginPath();
33 c.moveTo(400,500);
34 c.arc(400,500,150,Math.PI*11/6,Math.PI*7/6,true);
35 //c.stroke();
36 c.fill()
37 c.beginPath();
38 c.fillStyle="#000000";
39 c.font="55px 隶书"
40 c.fillText("纵",375,275);
41 c.beginPath();
42 c.strokeStyle="#800000";
43 c.lineWidth=2
44 c.font="55px 隶书"
45 c.strokeText("横",375,320);
46
47
48
49
50 </script>
51 </body>
52 </html>
canvas效果
直接百度：canvas特效
4、svg
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
svg简单小实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>
</body>
</html>
svg一般效果
直接百度：svg特效
5、svg和canvas的区别
canvas和svg的简单区别
语言：canvas是使用javascript语言来绘制图像，svg使用xml语言绘制图像
表现：canvas依赖像素，放大会失真，svg不依赖像素，放大不会失真
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas | SVG |
|
|
