HTML5篇

最新推荐文章于 2023-08-06 13:00:03 发布

爱吃玉米的鱼YA

最新推荐文章于 2023-08-06 13:00:03 发布

阅读量126

点赞数

分类专栏：程序猿

本文链接：https://blog.csdn.net/CandiceYu/article/details/89189740

版权

程序猿专栏收录该内容

14 篇文章 0 订阅

订阅专栏

HTML5 中的一些有趣的新特性

拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）
<script> src=“http://html5shiv.googlecode.com/svn/trunk/html5.js”</script>

如何区分：
DOCTYPE声明新增的结构元素、功能元素

HTML5 视频(Video)音频(audio)

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

video 与 video 之间插入的内容是供不支持video元素的浏览器显示的（audio同样）
video 元素允许多个 source 元素。（audio同样）
src url 要播放的视频的 URL。（3-6音频视频属性）
autoplay 如果出现该属性，则视频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
7.muted muted 规定视频输出应该被静音。（音频属性）
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
9… load() 更改视频来源，并重载视频（8-11音频方法）
play() 方法开始播放当前的音频或视频。

pause() 方法停止（暂停）当前播放的音频或视频，paused已暂停

   var myVideo=document.getElementById("video1");
   function playVid()
     {
     myVideo.play();
     }
   function pauseVid()
     {
     myVideo.pause();
     }

canPlayType() 方法浏览器是否能播放指定的音频/视频类型

  myVid=document.createElement('video');
  isSupp=myVid.canPlayType(vidType+';codecs="'+codType+'"');

拖放（Drag 和 drop）

<script type="text/javascript">
  function allowDrop(ev)
  {
    ev.preventDefault();
  }

  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>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

设置元素为可拖放

为了使元素可拖动，把 draggable 属性设置为 true

拖动什么 - ondragstart 和 setData()

ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据 dataTransfer.setData() 方法设置被拖数据的数据类型和值。数据类型是 “Text”，值是可拖动元素的 id (“drag1”)

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。默认法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。调用 ondragover 事件的 event.preventDefault() 方法

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。把被拖元素追加到放置元素（目标元素）中

Canvas

canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。默认宽300px，高150px
优势：不需要将所绘制图像中的每个图元当做对象存储，执行性能很好。在其他变成语言现有的优秀二维绘图API的基础上实现canvas API相对来说简单

创建 Canvas 元素

<canvas id=“myCanvas” width=“200” height=“100”>不支持HTML5 canvasAPI的某些特性，写在这替代</canvas>

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
JavaScript 使用 id 来寻找 canvas 元素
var c=document.getElementById(“myCanvas”);
创建 context 对象
var cxt=c.getContext(“2d”); //是内建的 HTML5 对象
绘制一个红色的矩形
cxt.fillStyle="#FF0000"; //方法将其染成红色，
cxt.fillRect(0,0,150,75); //方法规定了形状、位置和尺寸，在画布上绘制 150x75 的矩形，从左上角开始 (0,0)

路径

在Canvas上画线，我们将使用以下两种方法：
● moveTo(x,y) 定义线条开始坐标
● lineTo(x,y) 定义线条结束坐标

  var c=document.getElementById("myCanvas");//通过ID找到并访问canvas对象
  var ctx=c.getContext("2d");//调用canvas对象的getContext函数获取上下文对象
  cxt.save();//保存尚未修改的cxt，这样即使进行了绘制和变换操作，也可以恢复到初始化状态
  cxt.beginPath();//canvas需要根据此来计算图形的内部和外部范围，以便完成后续的描边和填充
  ctx.moveTo(0,0);//绘制的起点的原点，但是不绘制，只是将当前位置移动到心得目标(x,y)，路径移动到画布中的指定点
  ctx.lineTo(70,-70);
  cxt.closePath();//会将路径的起始坐标自动作为目标坐标，通知canvas绘制的图形已经闭合或形成了完全封闭的区域
  ctx.stroke(); //显示在canvas上
  cxt.restore();//恢复原有的绘图状态

描边样式

加宽线条：cxt.linewidth = 4;
平滑路径的结合点：cxt.lineJoin = ‘round’;
将颜色改成棕色：cxt.strokeStyle = ‘#663300’;
绘制：cxt.stroke();
线条末端样式：lineCap:butt|square|round;

填充样式

cxt.fillStyle = ‘#339900’; //填充颜色
cxt.fil();先描边填充，填充覆盖一部分描边路径，希望看到完整的描边路径，可在绘制路径(cxt.stroke())之前填充调用(cxt.fill())
fillRect() 画一个有填充色的矩形
strokeRect() 基于给出的位置和坐标画出矩形的轮廓
clearRect() 清除矩形区域内的所有内容并将它恢复到初始状态，透明色

绘制曲线

quadraticCurreTo(控制点,终点);二次贝塞尔曲线

   cxt.moveTo(20,20);
   cxt.quadraticCurreTo(220,100,200,20);

cmd-markdown-logo

canvas中绘制圆形

cxt.arc(中心点,半径,起始角度,结束角度,顺/逆时针);

  arc(100,75,50,0*Math.PI,1.5*Math.PI);

加载图片

var bark = new Image();
bark.src = "XX.jpg";
//加载图片完成之后，将其显示在canvas上
bark.onload = function(){ drawTrails(); }
//用图片背景进行填充
cxt.drawImage(img,剪切的x,y标位置,被剪切图像的宽高度);

使用背景图片替代颜色线条

cxt.strokeStyle = cxt.createPattern(img,图片平铺方式);
cxt.lineWidth = 20;
cxt.stroke();
cxt.scale()

canvas - 变换

缩放 cxt.scale(x缩放当前绘图的宽度(1=100%,2=200%),y);
旋转 cxt.rotate(弧度);
重新映射 context.translate(添加到水平坐标（x）上的值,y);
允许缩放、旋转、移动并倾斜当前的环境 cxt.transform(水平缩放,水平倾斜,垂直倾斜,垂直缩放,水平移动,垂直移动);

Canvas - 文本

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

  ctx.font="30px Arial";  
  ctx.fillText("Hello World",10,50); //使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）
  ctx.strokeText("Hello World",10,50); 使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）

Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等,各种形状可以自己定义不同的颜色。使用渐变对象，必须使用两种或两种以上的停止颜色。

首先，创建渐变对象
其次，为渐变对象设置颜色指明过度方式
在cxt上为填充样式或者描边样式设置渐变

// 创建渐变对象
var grd=ctx.createLinearGradient(渐变开始点坐标，结束点坐标);//创建一个线性渐变。使用渐变填充矩形
var grd=ctx.createRadialGradient(渐变开始圆的x,y坐标,开始圆的半径,渐变结束圆的半径,结束圆半径);//创建一个径向/圆渐变。使用渐变填充矩形
grd.addColorStop(0,“red”);//指定颜色停止，参数使用坐标来描述，可以是0至1.
grd.addColorStop(1,“white”);

// 使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)用于定义用于网络的基于矢量的图形,使用 XML 格式定义图形, 图像在放大或改变尺寸的情况下其图形质量不会有损失,是万维网联盟的标准
优势: 图像可通过文本编辑器来创建和修改,图像可被搜索、索引、脚本化或压缩,是可伸缩的,可在任何的分辨率下被高质量地打印,可在图像质量不下降的情况下被放大

直接在HTML嵌入SVG代码

SVG不能直接嵌入到Opera。

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black"
    stroke-width="2" fill="red"/>
  </svg>

SVG矩形

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
  </svg>

fill 属性定义矩形的填充颜色
stroke 属性定义矩形边框的颜色
stroke-width 属性定义矩形边框的宽度
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
rx 和 ry 属性可使矩形产生圆角。
strokelinecap属性定义不同类型的开放路径的终结

SVG 圆形 - <circle>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black"
    stroke-width="2" fill="red"/>
  </svg>

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径

SVG 椭圆 - <ellipse>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="300" cy="80" rx="100" ry="50"
    style="fill:yellow;stroke:purple;stroke-width:2"/>
  </svg>

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

SVG 直线 - <line>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line x1="0" y1="0" x2="200" y2="200"
    style="stroke:rgb(255,0,0);stroke-width:2"/>
  </svg>

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

SVG 路径 - <path>

路径数据大写表示绝对定位，小写表示相对定位

M = moveto 移动到
L = lineto 画到
H = horizontal lineto 横向
V = vertical lineto 纵向
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath 路径就会自动回到原点

开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" />
  </svg>

SVG 线性渐变 - <linearGradient>

<linearGradient>元素用于定义线性渐变。<linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

水平线性渐变从黄色到红色的椭圆形

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      </linearGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  </svg>

<linearGradient>标签的id属性可为渐变定义一个唯一的名称
<linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。offset属性用来定义渐变的开始和结束位置。
填充属性把 ellipse 元素链接到此渐变

SVG 放射性渐变 - <radialGradient>

<radialGradient>元素用于定义放射性渐变。

定义一个放射性渐变从白色到蓝色椭圆

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(255,255,255);
        stop-opacity:0" />
        <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      </radialGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  </svg>

<radialGradient>标签的 id 属性可为渐变定义一个唯一的名称
CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束
填充属性把ellipse元素链接到此渐变

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

新的 Input 类型

color 选取颜色
date 定义一个时间控制器
datetime 定义一个日期和时间控制器（本地时间）
datetime-local 定义一个日期和时间 (无时区)
email 包含 e-mail 地址的输入域
month 定义月与年 (无时区)
number 定义一个数值输入域(限定)
range 定义一个不需要非常精确的数值（类似于滑块控制）
search 定义一个搜索字段
tel 定义输入电话号码字段
time 定义可输入时间控制器（无时区）
url 在提交表单时，会自动验证 url 域的值
week 定义周和年 (无时区)

爱吃玉米的鱼YA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5篇

HTML5 中的一些有趣的新特性拖拽释放(Drag and drop) API语义化更好的内容标签（header,nav,footer,aside,article,section）音频、视频API(audio,video)画布(Canvas) API地理(Geolocation) API本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionSt...
复制链接

扫一扫