前端知识点总结（七）Html5新特性

最新推荐文章于 2024-06-01 10:02:07 发布

403-forbidden

最新推荐文章于 2024-06-01 10:02:07 发布

阅读量417

点赞数

分类专栏：知识点

本文链接：https://blog.csdn.net/weixin_39173093/article/details/80699183

版权

知识点专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5 是下一代的 HTML

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

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

绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持（cookie，localstorage，sessionstorage）
新的特殊内容标签，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

Canvas

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

Canvas 对象表示一个 HTML 画布元素

它没有自己的行为，但是定义了一个API 支持脚本化客户端绘图操作。你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。

语法：

Canvas.getContext(contextID)

参数：

参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

返回值：

一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。

Canvas标签:

canvas标签是一个矩形区域，它包含两个属性width和height，分别表示矩形区域的宽和高，这两个属性都是可选的，并且都可以通过css来设定，下面就是一个小例子(创造了一个canvas画布)：

<canvas id="aCanvas" width="300" height="300" style="border:1px solid #dfdfdf;">
       你的浏览器不支持 Canvas 元素。
</canvas

canvas本身没有绘制能力所以我们需要用JavaScript来绘制：

<script>
var a=document.getElementById("aCanvas");//使用id 来寻找 canvas 元素
var cxt=a.getContext("2d");//创建 context 对象 getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
cxt.fillStyle="#FF0000";//
cxt.fillRect(0,0,150,75);//fillRect方法规定了形状、位置和尺寸
</script>

其中关于Rect坐标的理解：

fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

在Canvas上画线的两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);

ctx.stroke();//stroke有划的意思

</script>

渐变：

两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

**canvas里的图片的引入：

drawImage(image,x,y)

var c=document.getElementById("myCanvas");
   var ctx=c.getContext("2d");
   var img=document.getElementById("scream");
   ctx.drawImage(img,10,10);

HTML5 (视频)- 如何工作

在 HTML5 中显示视频，需要如下操作即可：

<video width="320" height="240" controls>
   <source src="/example/video/movie.mp4" type="video/mp4">
   <source src="/example/video/movie.ogg" type="video/ogg">
   您的浏览器不支持Video标签。
</video>

HTML5 <video> - 使用 DOM 进行控制

这个例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。

<!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="/example/video/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/video/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div> 
<script>
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 controls>
   <source src="/example/video/horse.ogg" type="audio/ogg">
   <source src="/example/video/horse.mp3" type="audio/mpeg">
   您的浏览器不支持 audio 元素。
</audio>

接下来就是客户端存储数据问题了（cookie，localstorage,sessionstorage）我会另开一个文章专门细细的总结这哥三的区别的

403-forbidden

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端知识点总结（七）Html5新特性

HTML5 是下一代的 HTMLHTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。HTML5 中的一些有趣的新特性：绘画的 canvas 元素用于媒介回放的 vid...
复制链接

扫一扫