HTML5新特性

(1)新的语义标签 header;footer

(2)增强型表单

新 input type

number;email;url;date;color

新 element

datalist

建议列表

progress

进度条

meter

刻度尺

output

新 attr

placehodler;autofocus;minlength;maxlength;min;max;

(3)视频和音频

视频

<video src="x.mp4"></video>

? mp4 安装mp4解码器

? avi 安装avi解码器

autoplay;controls;muted;poster;preload

js volume;playbackRate;paused;

play() pause() onplay onpause()

音频

<audio src="x.mp3" autoplay;controls;></audio>

(4)绘图 Canvas

网页中绘图三种技术

svg

2d矢量图

矢量图由一个一个线条组件

无限放大缩小不会失真

百度地图

flash动画效果

canvas

2d位图

webgl

3d位图

three.js

canvas

开发流程

创建画布 <canvas width="" height=""></canvas>

获取画布

var c3 = document.getElementById("c3");

创建画笔

var ctx = c3.getContext("2d");

矩形

ctx.lineWidth = 1;

ctx.strokeStyle = "#fff"

ctx.strokeRect(x,y,w,h);

ctx.fillStyle= "#fff"

ctx.fillRect(x,y,w,h);

ctx.clearRect(x,y,w,h);

文本

ctx.font=""

ctx.textBaseline = "";

ctx.fillText(str,x,y);

ctx.strokeText(str,x,y)

ctx.measureText(str).width

路径

路径由多个坐标点组件本身不可见但可以用描边填充

ctx.beginPath() 开始一条新路径

ctx.closePath() 闭合一条路径

ctx.moveTo(x,y) 移动到指定点

ctx.lineTo(x,y) 从当前点到指定点画一条直线

ctx.arc(cx,cy,r,start,end)

cx/cy 圆心

r 半径

start 起始角度

end 终止角度

ctx.stroke()

ctx.fill()

画像

图像保存服务器中,canvas客户端技术 下载

var p3 = new Image()

p3.src = "img/p3.png"

p3.onload = function(){}

ctx.drawImage(p3,x,y,w,h)

变形

ctx.rotate(弧度)

旋转角度，旋转画笔

ctx.translate(x,y)

平移原点[轴点]

ctx.translate(250,200)

0,0 原先左上角->0,0 画布中心

ctx.save(); 保存画笔状态 {原点,角度;颜色...}

ctx.restore(); 恢复画笔状态

渐变对象

var g = ctx.createLinearGradient(0,0,500,0)

g.addColorStop(offset,color)

ctx.fillStyle = g;

ctx.fillRect(0,0,100,30)

(5) SVG

区别

矢量图

标签

每个元素都可以绑定事件

统计图

<rect x y width height fill fill-opacity stroke></rect>

<circle r cx cy fill stroke></circle>

创建元素

字符串拼接

var html = "<rect></rect>"

svg.innerHTML = html

创建元素

var r = document.createElementNS(";,"rect")

r.setAttribute("fill","")

svg.appendChlid(r)

删除

svg.removeChlid(c)

svg.innerHTML = ""; 所有元素清除

图形

椭圆

<ellipse cx cy rx ry></ellipse>

直线

<line x1 y1 x2 y2 stroke="" stroke-width=""></line>

折线

<polyline points="x,y x,y.."

文本

<text>文本内容</text>

图形

<image xlink:href="x.mpr"></image

特效对象

渐变对象

滤镜

第三方绘图库

d3/echarts

加载 echarts.min.js

<div id="main" style="width:500px;height:400px"></div>

var mychart -= echarts.init(...main)

var option = {} 配置项

mychart.setOption(option)

(6)拖放API

操作:拖动和释放

源对象(动)

ondragstart

ondrag

ondragend

目标对象

ondragenter

ondragover

ondragleave

ondrop

(7)地理定位

geolocation

百度地图

(8)WebWorker

创建新线程执行耗时JS任务

var w = new Worker("x.js")

w.postMessage(str)

x.onmessage = function(e){e.data}

(9)Web Storage

客户端存储数据

sessionStorage

当前会话中生效

会话:

获取数据

var value = sessionStoage.getItem(key)

获取数据

var value = sessionStoage[key]

保存数据

sessionStoage.setItem(key,value)

保存数据

sessionStorage[key] = value

清除数据

sessionStorage.clear()

数除数据

sessionStorage.removItem(key)

数据个数

sessionStorage.length

获取key

var key = sessionStorage.key(i)

localStorage

(10)Web Socket