1. Web Storage & Web Socket & Canvas @龙涎 molice123@gmail.com http://momomolice.com

2. Web Storage

3. Web Storage 什么是Web Storage？ 为什么使用它 怎么用 应用前景

4. Web Storage 什么是Web Storage？ 为什么使用它 怎么用 应用前景

7. Web Storage 在此之前我们用什么？ userData Cookies Gears

8. Web Storage 无网络连接 跨平台 容量大 速度快 无插件

9. Web Storage 什么是Web Storage？ 为什么使用它 怎么用 应用前景

10. Web Storage 无法在File://协议下 调用toString() 注意大整数、浮点数 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 } 更好的方式： storage.key = value; DEMO

11. Web Storage

13. newValue：发生变动后的值

14. oldValue：发生变动前的值

17. 存储类型：String

18. 容量控制：用户，QUOTA_EXCEEDED_ERR异常http://dev.w3.org/html5/webstorage/ http://diveintohtml5.org/storage.html http://blog.csdn.net/dojotoolkit/article/details/6614883

19. Web Storage 什么是Web Storage？ 为什么使用它 怎么用 应用前景？…discuss

20. Web Socket

22. 全双工，服务器主动推送

23. 轻量的协议报头

24. 快速、实时ws:// wss://

25. Web Socket 使用Web Socket 服务器 Javascript (Node.js)、Python、 Java … 客户端 Chrome4+ Safari5+ Firefox4+*

26. Web Socket Web Socket API /*check*/ if(!!window.WebSocket) { //do sth } else { //not support } varurl = “ws://localhost:8080/server”; var socket = new WebSocket(url); socket.onopen = function(){}; socket.onmessage = … socket.onerror = … socket.onclose = … socket.readyState;//状态码

27. Web Socket 应用实例 网易博客Android客户端 评论、留言等消息的接收

28. Canvas

29. Canvas 什么是Canvas 为什么使用它 怎么用 应用前景

30. Canvas 什么是Canvas 为什么使用它 怎么用 应用前景

32. 就是个PhotoShop？

33. %#&*@$多API？3.6倍！

34. Canvas 什么是Canvas 为什么使用它 怎么用 应用前景

35. Canvas 在此之前我们用什么？

36. Canvas ？ ？ ？

37. Canvas 已有成熟、被长久 验证是有效的规范

38. Canvas 什么是Canvas 为什么使用它 怎么用 应用前景

39. Canvas 基本流程 <canvas id=“canvas” width=“100” height=“100”>你的浏览器不支持Canvas</canvas> var canvas = document.getElementById(“canvas”);//获取画布 varctx = canvas.getContext(“2d”);//获取上下文 ctx.strokeStyle = “rgba(255, 0, 0, 0.5)”;//线条颜色 ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(100, 100); ctx.stroke();//将绘画应用到画布上

41. toDataURL ([type])Context · · · · 图形绘制：lineTo()、fillRect() 、quadraticCurveTo()… 风格和颜色：fillStyle()、createLinearGradient()… 图像操作：drawImage()、createImageData()… 文字操作：font()、fillText()… 动作：translate()、rotate()、transform()… 组合：globalCompositeOperation()、clip… Mozilla API教程

42. Canvas DEMO http://momomolice.com/demo 画板打砖块

43. Canvas 实例 热力图 在线图表

44. Canvas 在线图片处理 图像滤镜

46. Canvas 但… Canvas不能取代Flash：交互× Canvas不能取代SVG：矢量×

47. Canvas 什么是Canvas 为什么使用它 怎么用 对alipay.com的好处？…discuss…

48. Thanks