范仁义html+css课程---9、video、audio、canvas和svg元素略讲
一、总结
一句话总结：
video：HTML5视频标签。
audio：html5音频标签。
canvas：绘制路径、矩形、圆形、字符以及添加图像。
svg：可伸缩矢量图形 (Scalable Vector Graphics)。
二、video、audio、canvas和svg元素
博客对应视频课程位置：9、video、audio、canvas和svg元素略讲
https://fanrenyi.com/video/2/15
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-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 |
|---|---|
|
|