首页 > 作文

HTML5有哪些新特征

更新时间:2023-04-06 14:04:35 阅读: 评论:0

一、html5 中的一些有趣的新特性:

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、h云南考试招生网eader、nav、ction
新的表单控件,比如 calendar、date、time、email、url、arch
二、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” “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; chart=utf-” />

<title>视频</title>

</head>

<body>

<video src=”. html音频视频-编解码工具.mp” controls=”controls” width=”px” height=”px”></video>

</body>

</html>

  效果:

(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; chart=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.paud) a.play();

el a.pau();

}

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)。意思是:在画布上绘制 150×75 的矩形,从左上角开始 (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; chart=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”

onmoumove=”cnvs_getcoordinates(event)” onmouout=”cnvs_clearcoordinates()”></div>

<div id=”xycoordinates”></div>

</body>

</html>

  知识点:
  *clientx 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。客户区指的是当前窗口。
  *innertext和innerhtml都可以给标签体里添加相应信息。
  效果:

(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; chart=utf-” />

<title>画布</title>

</head>

<body>

<canvas id=”mycanvas” width=”” height=”” style=”border:px solid #ccc;”>

your browr 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() 方法定义的路径。默认颜色是黑色。
  效果:

(3)绘制圆形
  *fill() 方法填充当前的图像(路径)。默认颜色是黑色。
  *arc() 方法创建弧/曲线(用于创建圆或部分圆):context.arc(x,y,r,sangle,eangle,counterclockwi);

中心: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.clopath():关闭一条路径。

复制代码 代码如下:

<!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; chart=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.clopath();

cxt.fill();

</script>

</body>

</html>

  效果:

(4)颜色渐变
  *createlineargradient() 方法创建线性的渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。使用 addcolorstop() 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色。js语法:context.createlineargradient(x0,y0,x1,y1):

*addcolorstop() 方法规定 gradient 对象中的颜色和位置。js语法:gradient.addcolorstop(stop,color);

复制代码 代码如下:

<!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; chart=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>

  效果:

(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);

复制代码 代码如下:

<!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; chart=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>

本文发布于:2023-04-06 14:04:23,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/521253ee99c22703bf0a9ec8a2ba55df.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:HTML5有哪些新特征.doc

本文 PDF 下载地址:HTML5有哪些新特征.pdf

标签:画布   代码   图像   方法
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图