HTML5 简介

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

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

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

HTML5 新元素

语义元素

HTML5 新Input类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Input 类型: color
color 类型用在input字段主要用于选取颜色。

选择你喜欢的颜色: <input type="color" name="favcolor">

Input类型：date
date 类型允许你从一个日期选择器选择一个日期。

生日: <input type="date" name="bday">

其他类型点击此处查阅

HTML5 Canvas

Canvas元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

canvas 元素只是图形容器，使用脚本来绘制图形。

画布创建

canvas通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>

画布绘制

canvas 元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成：

<script> //找到canvas元素 var c = document.getElementById("myCanvas"); //创建Context对象 var ctx = c.getContext("2d"); //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 //下面两条代码绘制一个红色矩形 //fillStyle属性可以设置CSS颜色，渐变，或图案。fillStyle 默认设置是 #000000（黑色）。 //fillRect(x, y, width, height) 方法定义了矩形当前的填充方式。 ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); </script>

画布坐标

canvas可以理解为二维网格，左上角坐标为（0，0）。

坐标定位代码：

<canvas id="myCanvas" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script> function cnvs_getCoordinates(e) {
     x = e.clientX; y = e.clientY; document.getElementById("xycoordinates") .innerHTML = "Coordinates: (" + x + "," + y + ")"; } function cnvs_clearCoordinates() {
     document.getElementById("xycoordinates").innerHTML = ""; </script>

画布路径

画线

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//线条开始坐标
ctx.moveTo(0, 0);
//线条结束坐标
ctx.lineTo(200, 100);
//绘制方法调用
ctx.stroke();

画圆

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
//arc（x,y,r,开始点，结束点），圆心（x,y）;
ctx.arc(100, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

画布文本

使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text, x, y) - 在 canvas 上绘制实心的文本
strokeText(text, x, y) - 在 canvas 上绘制空心的文本

画布渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

createLinearGradient(x, y, x1, y1) - 创建线性渐变
createRadialGradient(x, y, r, x1, y1, r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。

使用渐变，设置 fillStyle 或 strokeStyle 的值为 渐变，然后绘制形状，如矩形、文本、或一条线。

画布图像

drawImage(image, x, y)

HTML5 矢量图

可伸缩矢量图形 svg (Scalable Vector Graphics)，图像在改变尺寸或大小的情况不会损失图像品质。

SVG优势
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

SVG使用

<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>

SVG 与 Canvas两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的，您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。

如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

HTML5表单

新表单元素

新表单属性

autocomplete
novalidate
新属性：

formmethod
formnovalidate
formtarget
height 与 width
list
min 与 max
multiple
pattern (regexp)
placeholder
required
step