Weitere ähnliche Inhalte
Ähnlich wie Web storage&web socket&canvas (20)
Web storage&web socket&canvas
- 1. Web Storage & Web Socket & Canvas @龙涎 molice123@gmail.com http://momomolice.com
- 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
- 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;//状态码
- 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教程