HTML5简介&视频&音频&拖放&画布&SVG

最新推荐文章于 2021-06-28 02:15:50 发布

时间解

最新推荐文章于 2021-06-28 02:15:50 发布

阅读量1.8k

点赞数

分类专栏： HTML 文章标签： video audio draggable canvas svg

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML5简介

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML5 是 W3C 与 WHATWG 合作的结果。WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些规则:

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

减少对外部插件的需求（比如 Flash）

更优秀的错误处理

更多取代脚本的标记

HTML5 应该独立于设备

开发进程应对公众透明

HTML5 中的一些有趣的新特性:

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

HTML5视频 [video]

直到现在，仍然不存在一项旨在网页上显示视频的标准。
当前，video 元素支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

插入一个视频，并添加播放按钮，如果浏览器不支持显示提示文字

<!DOCTYPE HTML>
<html>
<body>

<video src="http://www.w3school.com.cn/i/movie.ogg"  width="320" height="240"  controls="controls">
   Your browser does not support the video tag.
</video>

</body>
</html>

使用DOM进行控制视频的播放，并可调整窗口大小

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center;">
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">大</button>
  <button onclick="makeNormal()">中</button>
  <button onclick="makeSmall()">小</button>
  <br /> 

  <video id="video1" width="420" style="margin-top:15px;">
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div> 

<script type="text/javascript">
var myVideo=document.getElementById("video1");

function playPause()
{ 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
} 

function makeBig()
{ 
    myVideo.width=560; 
} 

function makeSmall()
{ 
    myVideo.width=320; 
} 

function makeNormal()
{ 
    myVideo.width=420; 
} 
</script> 

</body> 
</html>

HTML5音频 [audio]

直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

当前，audio 元素支持三种音频格式：

Type	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	X	√	√	√	X
MP3	√	X	X	√	√
Wav	X	√	√	X	√

在页面添加一段音频，要求支持所有浏览器，并可进行播放、暂停

<!DOCTYPE HTML>
<html>
<body>

<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

HTML5拖放 [draggable]

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放，即抓取对象以后拖到另一个位置。

将一个图像在2个区域间来回拖放

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
    ev.preventDefault();  /*  preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）*/
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="drag1" src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

HTML5画布 [canvas]

HTML5 的 canvas 元素使用JavaScript在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建一个画布，并在上面画一个红色的圆

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");                 <!-- 创建 context 对象 -->
    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(70,18,15,0,Math.PI*2,true);         <!-- 绘制一个圆 -->
    cxt.closePath();
    cxt.fill();

</script>

</body>
</html>

HTML5矢量图 [SVG]

什么是SVG ?

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

SVG 的优势:

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
创建一个五角星，并在5个角填充红色

<!DOCTYPE html>
<html>
<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:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>

</body>
</html>

Canvas VS SVG

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

下表列出了canvas与SVG之间的一些不同之处：

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