范仁义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简单实例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <video width="640" controls autoplay>

     <source src="22m.mp4" type="video/mp4">

     您的浏览器不支持 video 属性。

 </video>

 </body>

 </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简单实例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Audio简单测试</title>

 </head>

 <body>

 <audio controls>

     <source src="test.mp3" type="audio/mpeg">

     您的浏览器不支持该音频格式。

 </audio>

 </body>

 </html>

3、canvas

什么是canvas

HTML5的canvas元素是HTML5技术标准中最令人振奋的功能之一。它提供了一套强大的图形API，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。让开发者能够制作从文字处理到电子游戏的各类应用程序。由与canvas的操作需要用到JavaScript知识，而我们现在还没有讲到JavaScript，所以本章中我们只是学习canvas的基础操作。但是再后续课程中我们讲完JavaScript之后仍然会对canvas进行进一步的深入学习

canvas简单实例

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>绘制扇形</title>

     <style type="text/css">

         canvas{background: #A9A9A0;margin-left: 200px}

     </style>

 </head>

 <body>

     <canvas id="canvas" width="800" height="600">

         您浏览器暂不支持HTML5的canvas元素

     </canvas>

     <script type="text/javascript">

         var canvas=document.getElementById('canvas');

         var c=canvas.getContext('2d');

          c.lineWidth=6;

          c.strokeStyle="FFA500";

          c.fillStyle="#FFA500";

          c.moveTo(400,500)

          c.arc(400,500,300,Math.PI*7/6,Math.PI*1.5,false)

          //c.stroke();

          c.beginPath();

          c.moveTo(400,500);

          c.arc(400,500,300,Math.PI*11/6,Math.PI*7/6,true);

          //c.stroke();

          c.fill()

          c.beginPath();

          c.fillStyle="#A9A9A0"

          c.arc(400,500,150,Math.PI*7/6,Math.PI*1.5,false)

          //c.stroke();

          c.beginPath();

          c.moveTo(400,500);

          c.arc(400,500,150,Math.PI*11/6,Math.PI*7/6,true);

          //c.stroke();

          c.fill()

          c.beginPath();

          c.fillStyle="#000000";

          c.font="55px 隶书"

          c.fillText("纵",375,275);

          c.beginPath();

          c.strokeStyle="#800000";

          c.lineWidth=2

          c.font="55px 隶书"

          c.strokeText("横",375,320);

     </script>

 </body>

 </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
依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用