HTML5有哪些新特征
⼀、HTML5 中的⼀些有趣的新特性：
⽤于绘画的 canvas 元素
⽤于媒介回放的 video 和 audio 元素
对本地离线存储的更好的⽀持
新的特殊内容元素，⽐如 article、footer、header、nav、section
新的表单控件，⽐如 calendar、date、time、email、url、search
⼆、HTML5 视频<video>
1、视频格式
Ogg = 带有 Theora 视频编码和 Vorbis ⾳频编码的 Ogg ⽂件
MPEG4 = 带有 H.264 视频编码和 AAC ⾳频编码的 MPEG 4 ⽂件
WebM = 带有 VP8 视频编码和 Vorbis ⾳频编码的 WebM ⽂件
2、<video> 标签的属性
*标签<source>规定多媒体资源，可以是多个
3、实例
（1）
复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>视频</title>
</head>
<body>
<video src=". HTML⾳频视频-编解码⼯具.mp" controls="controls" width="px" height="px"></video>
</body>
html document是什么</html>
效果：
（2）HTML5 <video> - 使⽤ DOM 进⾏控制（⽤JS来控制视频的播放/暂停以及放⼤、缩⼩）
<⼩知识：在JS函数⾥输⼊console.log("hello")；表⽰在浏览器控制台输出hello，若控制台可以输出hello，则表⽰函数是可以调⽤的。
复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>视频</title>
</head>
<body>
<video id="video" src=". HTML⾳频视频-编解码⼯具.mp" width="px" height="px"></video>
<button onclick="clickA()">播放/暂停</button>
<button onclick="clickBig()">放⼤</button>
<button onclick="clickSmall()">缩⼩</button>
<script><!--若此JS部分写在<head></head>中，视频将播放错误-->
var a = ElementById("video");
function clickA() {
if(a.paused) a.play();
else a.pause();
}
function clickBig() {
a.width = ;
a.height = ;
}
function clickSmall() {
a.width = ; <!--此处不能写px，否则会出错，可以写成a.width = +"px";-->
a.height = ;
}
</script>
</body>
</html>
效果：
点击放⼤、缩⼩视频会有相应的改变。
三、⾳频<audio>
1、⾳频格式
2、<audio>标签属性
control 属性供添加播放、暂停和⾳量控件。<audio> 与 </audio> 之间插⼊的内容是供不⽀持 audio 元素的浏览器显⽰的。（视频中也是⼀样）
四、HTML 5 Canvas（画布）
1、什么是Canvas?
canvas 元素⽤于在⽹页上绘制图形。
*HTML5 的 canvas 元素使⽤ JavaScript 在⽹页上绘制图像，canvas 元素本⾝是没有绘图能⼒的。所有的绘制⼯作必须在 JavaScript 内部完成。
*画布是⼀个矩形区域，您可以控制其每⼀像素。
*canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。
2、相关的JS知识：
（1）getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。
（2）fillStyle ⽅法将其染⾊，fillRect ⽅法规定了形状、位置和尺⼨。【fillRect ⽅法拥有参数 (0,0,150,75)。意思是：在画布上绘制 150x75 的矩形，从左上⾓开始 (0,0)】
3、实例
（1）把⿏标悬停在矩形上可以看到坐标
复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>画布</title>
<script type="text/javascript">
function cnvs_getCoordinates(e)
{
x=e.clientX; <!--clientX 事件属性返回当事件被触发时⿏标指针向对于浏览器页⾯（或客户区）的⽔平坐标-->
y=e.clientY;
}
function cnvs_clearCoordinates()
{
}
</script>
</head>
<body >
<p>把⿏标悬停在下⾯的矩形上可以看到坐标：</p>
<div id="coordiv"
onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<div id="xycoordinates"></div>
</body>
</html>
知识点：
*clientX 事件属性返回当事件被触发时⿏标指针向对于浏览器页⾯（或客户区）的⽔平坐标。客户区指的是当前窗⼝。 *innerText和innerHTML都可以给标签体⾥添加相应信息。
效果：
（2）绘制线条
复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="" height="" >
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var ElementById("myCanvas");
var Context("d");
cxt.lineTo(,);
cxt.lineTo(,);
cxt.stroke();
</script>
</body>
</html>
知识点：
*moveto是移动到某个坐标，lineto是从当前坐标连线到某个坐标。这两个函数加起来就是画⼀条直线。画线要⽤“笔”，那么MoveToEx()把笔要画的起始位置固定了（x,y）然后要固定终⽌位置要⽤到LineTo函数确定终⽌位置（xend,yend），这样⼀条线就画出来了。每次与前⾯⼀个坐标相连。
*stroke() ⽅法会实际地绘制出通过 moveTo() 和 lineTo() ⽅法定义的路径。默认颜⾊是⿊⾊。
效果：
（3）绘制圆形
*fill() ⽅法填充当前的图像（路径）。默认颜⾊是⿊⾊。
*arc() ⽅法创建弧/曲线（⽤于创建圆或部分圆）：context.arc(x,y,r,sAngle,eAngle,counterclockwise);
中⼼：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始⾓：arc(100,75,50,0,1.5*Math.PI)
结束⾓：arc(100,75,50,0*Math.PI,1.5*Math.PI)
* Cxt. beginPath() ：开启路径，开启后可以从新设置相关属性。 Cxt.closePath(）：关闭⼀条路径。
复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>画布</title>
</head>
<body>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论