web storage&web socket&canvas
TRANSCRIPT
Web Storage
• 什么是Web Storage？
• 为什么使用它
• 怎么用
• 应用前景
Web Storage
• 什么是Web Storage？
• 为什么使用它
• 怎么用
• 应用前景
Web Storage
Web Storage
Web Storage？
• W3C标准，剥离于HTML5
• 包括sessionStorage + localStorage
Web Storage
• 什么是Web Storage？
• 为什么使用它
• 怎么用
• 应用前景
在此之前我们用什么？
Web Storage
技术 容量 要求 浏览器兼容 缺点
Cookies 4KB 无 容量、流量
userData 64KB×10 IE IE Only
Gears no-limit 插件 不再支持
Web Storage
5M+ 无 no IE7-
容量大 速度快 无插件 跨平台 无网络连接
Web Storage
Web Storage
• 什么是Web Storage？
• 为什么使用它
• 怎么用
• 应用前景
Web Storage API
/*write*/setItem({string}key, {*}value)
/*read*/getItem({string}key)
/*delete*/removeItem({string}key)
/*get key name*/key({number}index)
/*clear all*/clear()
/*check*/if(!!window.sessionStorage) {
//store the data} else {
//not support}
调用toString()
注意大整数、浮点数
无法在File://协议下
DEMO
更好的方式：
storage.key = value;
Web Storage
Web Storage
Web Storage Event
宿主：window(w3c) document(IE)
句柄：onstorage
属性：
• key：发生变动的key
• newValue：发生变动后的值
• oldValue：发生变动前的值
• url：事件页面的url
Web Storage
sessionStorage vs. localStorage
session
页面打开→关闭，不受刷新影响
当前页面
local
永久
同域
存活期
存活范围
Web Storage
缺点 & 注意事项
• 安全：明文
• 存储类型：String
• 容量控制：用户，QUOTA_EXCEEDED_ERR异常
http://dev.w3.org/html5/webstorage/http://diveintohtml5.org/storage.htmlhttp://blog.csdn.net/dojotoolkit/article/details/6614883
Web Storage
Web Storage
• 什么是Web Storage？
• 为什么使用它
• 怎么用
• 应用前景？…discuss
Web Socket
Web Socket
Web Socket?
• 建立在TCP/IP上，不同于HTTP的通信协议
• 全双工，服务器主动推送
• 轻量的协议报头
• 快速、实时
ws:// wss://
Web Socket
使用Web Socket
服务器
Javascript(Node.js)、Python、
Java…
客户端
Chrome4+Safari5+
Firefox4+*
Web Socket API
Web Socket
/*check*/if(!!window.WebSocket) {
//do sth} else {
//not support}
var url = “ws://localhost:8080/server”;
var socket = new WebSocket(url);
socket.onopen = function(){};
socket.onmessage = …
socket.onerror = …
socket.onclose = …
socket.readyState;//状态码
Web Socket
应用实例
网易博客Android客户端
评论、留言等消息的接收
Canvas
• 什么是Canvas
• 为什么使用它
• 怎么用
• 应用前景
Canvas
• 什么是Canvas
• 为什么使用它
• 怎么用
• 应用前景
Canvas
Canvas?
Canvas
• <canvas id = “canvas” width = “300” height = “300”></canvas>？
• 就是个PhotoShop？
• %#&*@$多API？
3.6倍！
• 什么是Canvas
• 为什么使用它
• 怎么用
• 应用前景
Canvas
Canvas
在此之前我们用什么？
学习难度
跨平台
交互
加载速度
Flash Canvas
Canvas
Canvas
已有成熟、被长久
验证是有效的规范
• 什么是Canvas
• 为什么使用它
• 怎么用
• 应用前景
Canvas
基本流程
<canvas id=“canvas” width=“100” height=“100”>你的浏览器不支持Canvas</canvas>
Canvas
var canvas = document.getElementById(“canvas”);//获取画布
var ctx = canvas.getContext(“2d”);//获取上下文
ctx.strokeStyle = “rgba(255, 0, 0, 0.5)”;//线条颜色
ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(100, 100);ctx.stroke();//将绘画应用到画布上
设置画布样式
(颜色、线条形状…)
绘制形状、路径
(线、矩形、图片…)
应用到画布
(此时才显示)
Canvas
• getContext (“2d*3d+”)
• toDataURL ([type])
Context · · · ·
1. 图形绘制：lineTo() 、fillRect() 、 quadraticCurveTo()…
2. 风格和颜色：fillStyle()、createLinearGradient()…
3. 图像操作：drawImage()、createImageData()…
4. 文字操作：font()、fillText()…
5. 动作：translate() 、rotate()、transform()…
6. 组合：globalCompositeOperation()、clip…
Mozilla API教程
操作都在context中，跟DOM无关，效率极高
Canvas · · · ·
画板 打砖块
DEMO http://momomolice.com/demo
Canvas
Canvas
实例
热力图 在线图表
在线图片处理
图像滤镜
Canvas
几点注意
Canvas
• 画布大小
建议写在html标签里
• lineWidth
线条原理
• clearRect()
不受层叠方式的影响
• translate()
不影响效率
• 图片操作
跨域图片只能显示，不能读取和操作源数据
Canvas
但…
Canvas不能取代Flash：交互×
Canvas不能取代SVG：矢量×
• 什么是Canvas
• 为什么使用它
• 怎么用
• 对alipay.com的好处？…discuss…
Canvas
Thanks