html5基础
1. Canvas
创建画布
JavaScript绘制图像
var c = $('#xxx');
var ctx = c.getContext('2d');
路径
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
圆
ctx.beginPath();
ctx.arc(50,50,50,0.2*Math.PI,0.5*Math.PI);
ctx.stroke();//画线
ctx.fill();//填充
文本
ctx.font='30px Arial';
ctx.fillText('xxx', 0, 30);//实心文字
ctx.strokeText('xxx', 0, 30);//空心文字
渐变
var grd = ctx.createLinearGradient(10,10,150,80);//创建(0,0)到(200,0)的线条渐变
grd.addColorStop(0, 'red');
grd.addColorStop(0.5, 'white');
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
var grd = ctx.createRadialGradient(200, 200, 400, 200, 200, 5); //创建圆(200,200,400)到圆(200,200,5)的圆渐变
图像
img = $('#xxx');
img.yyy=function(x,y){
ctx.drawImage(img, x, y);
}
img.yyy(10, 0);
2. (SVG) Scalable Vector Graphics
3. MathML
指数
矩阵
4. 拖放
#div1, #div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
拖动图片到矩形框中:
5. 视频
play() pause() width
6. 音频
7. input新类型
datetime
datetime-local
month
tel
time
url
week
8. 表单属性
autocomplete
novalidate
autofocus
input与表单相关的属性
form
当type='submit'/'image'时
formaction
formenctype
formmethod
formnovalidate
formtarget
9. 语义元素
10. Web存储
localStorage永久保存数据。
sessionStorage关闭浏览器后删除数据。
使用方法：
localStorage.xxx='yyy';
localStorage.setItem(key, value);
localStorage.getItem(key);
localStorage.removeItem(key);
localStorage.clear();
localStorage.key(index);
11. Web SQL
openDatabase
transaction
executeSql
12. Web缓存
manifest
13.Web Workers
检测浏览器是否支持Web Worker
if(typeof(Worker) !== 'undefined')
demo.js
postMessage(i);
w = new Worker('demo.js');
w.onmessage=function(event){
event.data //传递的数据
}
w.terminate();
14.Web SSE (Server-Sent Event)
检测浏览器是否支持SSE：
if(typeof(EventSource)!=='undefined')
var source = new EventSource(url);
source.onmessage=function(event){
event.data //传递的数据
}
服务端：
把请求报头'Content-Type'设置为'text/event-stream'
规定不对页面进行缓存
输出发送日期（始终以'data:'开头）
向网页刷新输出数据
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onerror 当发生错误