欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5有哪些新特性

发布时间:2016-12-03  编辑:杨雨个人博客网站   点击:   

一、HTML5 中的一些风趣的新特征:

用于绘画的 canvas 元素
用于前言回放的 video 和 audio 元素
对当地离线存储的更好的支持
新的非凡内容元素,好比 article、footer、header、nav、section
新的表单控件,好比 calendar、date、time、email、url、search
二、HTML5 视频<video>
1、视频名目

HTML5有哪些新特征

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
  MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
2、<video> 标签的属性

HTML5有哪些新特征


 *标签<source>划定多媒体资源,可所以多个
3、实例
  (1)
 

代码如下:
<!DOCTYPE Html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xHtml/DTD/xHtml-transitional.dtd">
<Html xmlns="http://www.w.org//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>

  结果:

HTML5有哪些新特征


(2)HTML5 <video> - 行使 DOM 举办节制(用JS来节制视频的播放/停息以及放大、缩小)

   <小常识:在JS函数里输入console.log("hello");暗示在赏识器节制台输出hello,若节制台可以输出hello,则暗示函数是可以挪用的。


代码如下:
<!DOCTYPE Html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xHtml/DTD/xHtml-transitional.dtd">
<Html xmlns="http://www.w.org//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 = document.getElementById("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>

  结果:

HTML5有哪些新特征


 点击放大、缩小视频会有响应的改变。
三、音频<audio>
1、音频名目

HTML5有哪些新特征


2、<audio>标签属性

HTML5有哪些新特征


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" "http://www.w.org/TR/xHtml/DTD/xHtml-transitional.dtd">
<Html xmlns="http://www.w.org//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;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>
<body style="margin:px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标:</p>
<div id="coordiv" style="float:left;width:px;height:px;border:px solid #ccc"
onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>



<div id="xycoordinates"></div>
</body>
</Html>

  常识点:
  *clientX 变乱属性返回当变乱被触发时鼠标指针向对付赏识器页面(或客户区)的程度坐标。客户区指的是当前窗口。
  *innerText和innerHTML都可以给标签体里添加响应信息。
  结果:

HTML5有哪些新特征


(2)绘制线条
 

代码如下:
<!DOCTYPE Html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xHtml/DTD/xHtml-transitional.dtd">
<Html xmlns="http://www.w.org//xHtml">
<head>
<meta http-equiv="Content-Type" content="text/Html; charset=utf-" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="" height="" style="border:px solid #ccc;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("d");
cxt.moveTo(,);
cxt.lineTo(,);
cxt.lineTo(,);
cxt.stroke();
</script>
</body>
</Html>

  常识点:
  *moveto是移动到某个坐标,lineto是从当前坐标连线到某个坐标。这两个函数加起来就是画一条直线。画线要用“笔”,那么MoveToEx()把笔要画的起始位置牢靠了(x,y)然后要牢靠终止位置要用到LineTo函数确定终止位置(xend,yend),这样一条线就画出来了。每次与前面一个坐标相连。
  *stroke() 要了解现实地绘制出通过 moveTo() 和 lineTo() 要领界说的路径。默认颜色是玄色。
  结果:

HTML5有哪些新特征


(3)绘制圆形
  *fill() 要领添补当前的图像(路径)。默认颜色是玄色。
  *arc() 要领建设弧/曲线(用于建设圆或部门圆):context.arc(x,y,r,sAngle,eAngle,counterclockwise);

HTML5有哪些新特征


中心: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)

HTML5有哪些新特征


* Cxt. beginPath()  :开启路径,开启后可以重新配置相干属性  。 Cxt.closePath():封锁一条路径。
 

代码如下:
<!DOCTYPE Html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xHtml/DTD/xHtml-transitional.dtd">
<Html xmlns="http://www.w.org//xHtml">
<head>
<meta http-equiv="Content-Type" content="text/Html; charset=utf-" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="" height="" style="border:px solid #ccc;"></canvas> <!--不能放在JS代码之后,不然结果出不来-->
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("d");
cxt.fillStyle="#FF";
cxt.beginPath();
cxt.arc(,,,,Math.PI*,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</Html>

  结果:

HTML5有哪些新特征


(4)颜色渐变
  *createLinearGradient() 要领建设线性的渐变工具。渐变可用于添补矩形、圆形、线条、文本等等。行使 addColorStop() 方礼貌定差异的颜色,以及在 gradient 工具中的那里定位颜色。JS语法:context.createLinearGradient(x0,y0,x1,y1):

HTML5有哪些新特征


*addColorStop() 方礼貌定 gradient 工具中的颜色和位置。JS语法:gradient.addColorStop(stop,color);

HTML5有哪些新特征




代码如下:
<!DOCTYPE Html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xHtml/DTD/xHtml-transitional.dtd">
<Html xmlns="http://www.w.org//xHtml">
<head>
<meta http-equiv="Content-Type" content="text/Html; charset=utf-" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="" height="" style="border:px solid #ccc;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("d");
var grd=cxt.createLinearGradient(,,,);
grd.addColorStop(,"#FF");
grd.addColorStop(,"#FF");
cxt.fillStyle=grd;
cxt.fillRect(,,,);
</script>
</body>
</Html>

  结果:

HTML5有哪些新特征


(5)把一幅图像安排到画布上
  *drawImage() 要领在画布上绘制图像、画布或视频。也可以或许绘制图像的某些部门,以及/可能增进或镌汰图像的尺寸。
    *JS语法1:在画布上定位图像:context.drawImage(img,x,y);
    *JS语法2:在画布上定位图像,并划定图像的宽度和高度:context.drawImage(img,x,y,width,height);
    *JS语法3:剪切图像,并在画布上定位被剪切的部门:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

HTML5有哪些新特征




代码如下:
<!DOCTYPE Html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xHtml/DTD/xHtml-transitional.dtd">
<Html xmlns="http://www.w.org//xHtml">
<head>
<meta http-equiv="Content-Type" content="text/Html; charset=utf-" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="" height="" style="border:px solid #ccc;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("d");
var img=new Image();
img.src=".png";
cxt.drawImage(img,,);
</script>
</body>
</Html>

本文地址:http://itbyc.com/web/html5/14500.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1