web storage&web socket&canvas
Post on 08-Jul-2015
1.383 Views
Preview:
TRANSCRIPT
Web Storage & Web Socket &Canvas
@龙涎
molice123@gmail.com
http://momomolice.com
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
top related