Successfully reported this slideshow.

Web storage&web socket&canvas

1,640 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Web storage&web socket&canvas

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

×