HTML5新特性

有趣的新特性：

• 新增的语义元素：article,nav,footer,header,section
• 用于绘画的canvas元素
• 用于媒体回放的video和audio元素
• 对本地存储更好的支持
• 新的表单控件：calendar,date,time,url,search,email

canvas

• 创建画布并绘制

`<canvas id="mycanvas" width="200" height="100" style="border:1px solid "></canvas>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#ff0";
ctx.fillRect(x,y,width,height);

• 路径

ctx.moveTo(0,0);
ctx.lineTo(100,200);
ctx.stroke();

• 画圆

ctx.beginPath();
ctx.arc(x,y,r,start,stop);
ctx.arc(40,40,20,0,2*Math.PI);
ctx.stroke();

• 文本

ctx.font="30px,字体"；
ctx.fillText("hello",10,50);（实心）
ctx.strokeText("hello",10,50);（空心字）

• 渐变

在这里插入代码片

• 图像

ctx.drawImage(img,10,10);

内联SVG

• 和canvas区别：
  SVG使用XML来描述2D图像，canvas通过JavaScript来绘制2D图像；
  SVG基于XML，可以为SVG DOM中的元素附加事件处理器；
  svg每个绘制的图形被视为对象，当对象的属性变化时，浏览器会自动重现图形；
  canvas是基于像素绘制的，绘制完成后不再被浏览器关注，如果位置改变则整个场景会重新绘制

web socket

一种在单个tcp链接上全双工通讯的协议。
只需要一次握手就可以建立持久性的链接，并进行双向数据传输。

web存储

localStorage和sessionStorage的区别:
web存储和cookie区别：
cookie和session区别：