Верстка Canvas, Алексей Охрименко, MoscowJS 31
•
3 likes•662 views
Зачем? Как и когда нужно создавать пользовательский интерфейс с помощью Canvas и как обогнать React Native - обо всем этом вы узнаете из этого доклада.
Recommended
More Related Content
What's hot
What's hot (10)
Viewers also liked
Similar to Верстка Canvas, Алексей Охрименко, MoscowJS 31
Similar to Верстка Canvas, Алексей Охрименко, MoscowJS 31 (20)
More from MoscowJS
More from MoscowJS (20)
Recently uploaded
Recently uploaded (20)
Верстка Canvas, Алексей Охрименко, MoscowJS 31
- 1. Верстка Canvas-ом Алексей Охрименко Twitter: @Ai_boy Telegram: Ai_boy IPONWEB
- 2. IPONWEB
- 4. Зачем?
- 6. about:blank
- 23. Как?
- 24. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 50, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 50, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html>
- 25. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 50, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 50, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html>
- 26. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 50, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 50, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html>
- 27. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 50, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 50, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html>
- 28. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 50, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 50, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html>
- 30. Ai2Canvas
- 38. Zebra Kit
- 41. zebra.ready(function() { eval(zebra.Import("ui", "layout")); // create canvas var canvas = new zCanvas(); var root = canvas.root; canvas.fullScreen(); root.properties({ layout : new BorderLayout(8,8), border : new Border(), padding: 8, kids: { TOP: new zebra.ui.Label('some label'), CENTER: new zebra.ui.HtmlTextField(), BOTTOM: new Button("Clear").properties({ canHaveFocus: false }) } }); root.find("//zebra.ui.Button").bind(function() { root.find("//zebra.ui.HtmlTextField").setValue(""); }); }); window.onresize = canvas.fullScreen.bind(canvas);
- 42. zebra.ready(function() { eval(zebra.Import("ui", "layout")); // create canvas var canvas = new zCanvas(); var root = canvas.root; canvas.fullScreen(); root.properties({ layout : new BorderLayout(8,8), border : new Border(), padding: 8, kids: { TOP: new zebra.ui.Label('some label'), CENTER: new zebra.ui.HtmlTextField(), BOTTOM: new Button("Clear").properties({ canHaveFocus: false }) } }); root.find("//zebra.ui.Button").bind(function() { root.find("//zebra.ui.HtmlTextField").setValue(""); }); }); window.onresize = canvas.fullScreen.bind(canvas);
- 43. zebra.ready(function() { eval(zebra.Import("ui", "layout")); // create canvas var canvas = new zCanvas(); var root = canvas.root; canvas.fullScreen(); root.properties({ layout : new BorderLayout(8,8), border : new Border(), padding: 8, kids: { TOP: new zebra.ui.Label('some label'), CENTER: new zebra.ui.HtmlTextField(), BOTTOM: new Button("Clear").properties({ canHaveFocus: false }) } }); root.find("//zebra.ui.Button").bind(function() { root.find("//zebra.ui.HtmlTextField").setValue(""); }); }); window.onresize = canvas.fullScreen.bind(canvas);
- 44. zebra.ready(function() { eval(zebra.Import("ui", "layout")); // create canvas var canvas = new zCanvas(); var root = canvas.root; canvas.fullScreen(); root.properties({ layout : new BorderLayout(8,8), border : new Border(), padding: 8, kids: { TOP: new zebra.ui.Label('some label'), CENTER: new zebra.ui.HtmlTextField(), BOTTOM: new Button("Clear").properties({ canHaveFocus: false }) } }); root.find("//zebra.ui.Button").bind(function() { root.find("//zebra.ui.HtmlTextField").setValue(""); }); }); window.onresize = canvas.fullScreen.bind(canvas);
- 45. zebra.ready(function() { eval(zebra.Import("ui", "layout")); // create canvas var canvas = new zCanvas(); var root = canvas.root; canvas.fullScreen(); root.properties({ layout : new BorderLayout(8,8), border : new Border(), padding: 8, kids: { TOP: new zebra.ui.Label('some label'), CENTER: new zebra.ui.HtmlTextField(), BOTTOM: new Button("Clear").properties({ canHaveFocus: false }) } }); root.find("//zebra.ui.Button").bind(function() { root.find("//zebra.ui.HtmlTextField").setValue(""); }); }); window.onresize = canvas.fullScreen.bind(canvas);
- 46. zebra.ready(function() { eval(zebra.Import("ui", "layout")); // create canvas var canvas = new zCanvas(); var root = canvas.root; canvas.fullScreen(); root.properties({ layout : new BorderLayout(8,8), border : new Border(), padding: 8, kids: { TOP: new zebra.ui.Label('some label'), CENTER: new zebra.ui.HtmlTextField(), BOTTOM: new Button("Clear").properties({ canHaveFocus: false }) } }); root.find("//zebra.ui.Button").bind(function() { root.find("//zebra.ui.HtmlTextField").setValue(""); }); }); window.onresize = canvas.fullScreen.bind(canvas);
- 47. zebra.ready(function() { eval(zebra.Import("ui", "layout")); // create canvas var canvas = new zCanvas(); var root = canvas.root; canvas.fullScreen(); root.properties({ layout : new BorderLayout(8,8), border : new Border(), padding: 8, kids: { TOP: new zebra.ui.Label('some label'), CENTER: new zebra.ui.HtmlTextField(), BOTTOM: new Button("Clear").properties({ canHaveFocus: false }) } }); root.find("//zebra.ui.Button").bind(function() { root.find("//zebra.ui.HtmlTextField").setValue(""); }); }); window.onresize = canvas.fullScreen.bind(canvas);
- 48. zebra.ready(function() { eval(zebra.Import("ui", "layout")); // create canvas var canvas = new zCanvas(); var root = canvas.root; canvas.fullScreen(); root.properties({ layout : new BorderLayout(8,8), border : new Border(), padding: 8, kids: { TOP: new zebra.ui.Label('some label'), CENTER: new zebra.ui.HtmlTextField(), BOTTOM: new Button("Clear").properties({ canHaveFocus: false }) } }); root.find("//zebra.ui.Button").bind(function() { root.find("//zebra.ui.HtmlTextField").setValue(""); }); }); window.onresize = canvas.fullScreen.bind(canvas);
- 50. Быстрее чем React Native
- 52. 23 FPS VS 119 FPS
- 55. FAQ Алексей Охрименко Twitter: @Ai_boy Telegram: Ai_boy IPONWEB http://bit.ly/296D9Qf