H5（1）
HTML5的改进与运用
新元素、新属性、完全支持 CSS3、Video 和 Audio、2D/3D 制图、本地存储、本地 SQL 数据、Web 、应用使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。HTML5 < video>、HTML5 < audio >使用 HTML5 你可以简单地开发应用：本地数据存储、访问本地文件、本地 SQL 数据、缓存引用、Javascript 工作者、XHTMLHttpRequest2、使用 HTML5 你可以简单的绘制图形:使用 < canvas> 元素、使用内联 SVG、使用 CSS3 2D 转换、CSS3 3D 转换、新选择器、新属性、动画、2D/3D 转换、圆角、阴影效果、可下载的字体等。
H5新元素< canvas>
< canvas>基于JS绘图API，定义图形图表以及其他图像：
<canvas id="xx" width="200" height="200" style="border:5px solid">
代码运行如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图形绘制</title>
</head>
<body>
<canvas width="200" height="100" style="border: 4px solid;">
</canvas>
</body>
</html>
运行结果：
使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框里绘制图形
</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
首先，找到 < canvas> 元素:
var c=document.getElementById(“myCanvas”);
然后，创建 context 对象：
var ctx=c.getContext(“2d”);
getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
ctx.fillStyle=“#FF0000”;
ctx.fillRect(0,0,150,75);
代码运行如下：
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
< canvas>路径（线条）:在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 “ink” 的方法，就像stroke().
定义开始坐标（0，0）和结束坐标（200，100）然后使用stroke()方法来绘制线条：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制线条</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
运行结果如下：
在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop)
实际上我们在绘制圆形时使用了 “ink” 的方法, 比如 stroke() 或者 fill()，用arc(方法绘制一个园)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制圆形</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
使用canvas绘制文本，重要的属性和方法如下：
font——定义字体
fillText(text,x,y)——在canvas上绘制实心的文本
strockText(text,x,y)——在canvas上绘制空心文本
使用fillText（）：
使用Arial字体在画布上绘制一个高30px的文字（实心）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实心文本</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
</script>
</body>
</html>
使用 strokeText(): 绘制一个空心文字：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>空心文本</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
</body>
</html>
canvas渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) —— 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) —— 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
使用 createLinearGradient():
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>颜色渐变</title>
</head>
<body>
<canvas id="myCanvas" height="100" width="200" style="border: 1px solid #d3d3d3;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"pink");
//渐变填充
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
运行结果如下：
Canvas画像：把一幅画放置到画布上用以下方法：
drawImage(image,x,y)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放置图像</title>
</head>
<body>
<p>要使用的图片</p>
<img id="scream" src="img_the_scream.jpg" alt="The scream" height="277" width="220"><p>呐喊</p>
<canvas id="myCanvas" width="250" height="300" style="border: 1px; color: blue; "></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function(){
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>
运行结果：
SVG
SVG 定义为可缩放矢量图形。
HTML < svg> 元素是 SVG 图形的容器。
SVG 有多种绘制路径、框、圆、文本和图形图像的方法。
SVG圆形：
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
SVG五角星：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG五角星</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>
</body>
</html>
SVG和Canvas两者的区别：
SVG是一种使用XML描述2D图形的语言/Canvas通过JS来绘制2D图形。（SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。）
下表列出了Canvas与SVG之间的不同之处：
H5 Video(视频)
< video> 元素提供了 播放、暂停和音量控件来控制视频。同时 < video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>视频</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="3c1a52ce85234b7e91ae7b6167607a44.mp4" type="video/mp4">
<source src=3c1a52ce85234b7e91ae7b6167607a44.mp4 type="video/ogg">
</video>
</body>
</html>
HTML5 < video> - 使用 DOM 进行控制，HTML5 < video> 和 < audio> 元素同样拥有方法、属性和事件。< video> 和 < audio>元素的方法、属性和事件可以使用JavaScript进行控制，其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知
为视频创建简单的播放/暂停以及调整尺寸控件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用video读取和设置属性来实现视频</title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.mp4" type="video/ogg">
</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>
上面的例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。
H5 Audio（音频）:
HTML5 规定了在网页上嵌入音频元素的标准，即使用 < audio> 元素。如需在 HTML5 中播放音频，你需要使用以下代码：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
< audio>定义了声音内容
< source>规定了多媒体资源，可以是多个，在< video>< audio >标签中使用
H5新的Input类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
常见类型逐一分析
color类型：
从拾色器中选择一个颜色:
选择你喜欢的颜色: < input type=“color” name=“favcolor”>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>颜色类型</title>
</head>
<body>
<form action="demo-form.php">
选择你喜欢的颜色: <input type="color" name="Favorite color"><br>
<input type="submit">
</form>
</body>
</html>
date类型：
date 类型允许你从一个日期选择器选择一个日期。
定义一个时间控制器
生日: < input type=“date” name=“bday”>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择日期</title>
</head>
<body>
<form action="demo-form.php">
生日: <input type="date" name="bday">
<input type="submit">
</form>
</body>
</html>
datetime类型：
datetime 类型允许你选择一个日期（UTC 时间）
定义一个日期和时间控制器（本地时间）：
生日 (日期和时间): < input type=“datetime” name=“bdaytime”>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定义一个时间</title>
</head>
<body>
<form action="demo-form.php">
生日 (日期和时间): <input type="datetime" name="bdaytime">
<input type="submit">
</form>
</body>
</html>
datetime-local类型
定义一个日期和时间 (无时区):
生日 (日期和时间): < input type=“datetime-local” name=“bdaytime”>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定义一个时间</title>
</head>
<body>
<form action="demo-form.php">
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
<input type="submit">
</form>
</body>
</html>
Email类型：
email 类型用于应该包含 e-mail 地址的输入域。
在提交表单时，会自动验证 email 域的值是否合法有效:
E-mail: < input type=“email” name=“email”>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电子邮箱</title>
</head>
<body>
<form action="demo-form.php">
E-mail: <input type="email" name="usremail">
<input type="submit">
</form>
</body>
</html>
Month类型：
Month类型允许你选择一个月份：
生日 (月和年): < input type=“month” name=“bdaymonth”>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择一个月份</title>
</head>
<body>
<form action="demo-form.php">
生日 ( 月和年 ): <input type="month" name="bdaymonth">
<input type="submit">
</form>
</body>
</html>
Number类型：
用于应该包含数值的输入域
数量 ( 1 到 5 之间 ): < input type="number"name=“quantity” min=“1” max=“5”>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数值的输入域</title>
</head>
<body>
<form action="demo-form.php">
数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
</body>
</html>
range类型:
range 类型显示为滑动条:定义一个不需要非常精确的数值（类似于滑块控制）:
< input type=“range” name=“points” min=“1” max=“10”>
请使用下面的属性来规定对数字类型的限定：
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
Search类型：
定义一个搜索字段 (类似站点搜索或者Google搜索):
Search Google: < input type=“search” name=“googlesearch”>
Tel类型：
定义输入电话号码字段:
电话号码: < input type=“tel” name=“usrtel”>
time类型：
允许你选择一个时间
定义可输入时间控制器（无时区）：
选择时间: < input type=“time” name=“usr_time”>