##HTML5简介###新特性：> 1. 新布局素，header、nav、section、article、footer> 2. 新表单控件，date、email、url、search、number> 3. 绘图特性，Canvas、SVG、WebGL> 4. 网页多媒体，video、 audio> 5. 本地存储特性> ……###1、新布局元素![此处输入图片的描述][2]###2、新表单类型````````````````````````###3、绘图#### 3.1、Canvas- 一种基于像素的渲染技术实现- 使用基于JavaScript的绘图API绘制图像- 拥有绘制路径、矩形、圆形、字符以及添加图像的方法![此处输入图片的描述][3]```
var c=document.getElementById("myCanvas");
// 创建 context 内建对象，绘制路径、矩形、圆形、字符以及添加图像
var cxt=c.getContext("2d");
// 绘制一个红色的矩形
cxt.fillStyle="#FF0000";
cxt.beginPath();
// arc() 创建弧/曲线，（圆心x,y、半径、起始角、结束角、逆时针）
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
// 填充当前绘图
cxt.fill();```#### 3.2、SVG- 可缩放矢量图形- 基于XML，用于描述二维矢量图形的一种图形格式- 用文本描述语言来描述图像内容- 具有交互性和动态性- W3C推荐标准![此处输入图片的描述][4]``````
#### 3.3、Canvas与SVG的区别：| Canvas | SVG || ----- | ----- || 依赖分辨率 | 独立于分辨率 || 不支持事件处理器 | 支持事件处理器 || 弱文本渲染能力 | 最适合具有大渲染面积的应用（谷歌地图） || 可以保存最终图片为PNG或者JPG | 复杂图像，重画变慢（任何使用DOM很多的情况都会变慢）|| 最适合许多对象频繁重画的图形游戏 | 不适合游戏应用 |
#### 3.4、WebGL- 一种在网页上渲染三维图形的3D绘图标准- 可以为HTML5 Canvas提供硬件3D加速渲染- 可被用于创建具有复杂3D结构的网页或游戏###4、多媒体```
您的浏览器不支持 video 标签。
您的浏览器不支持 audio 标签。
```
