Верстка Canvas, Алексей Охрименко, MoscowJS 31
•
3 j'aime•661 vues
Зачем? Как и когда нужно создавать пользовательский интерфейс с помощью Canvas и как обогнать React Native - обо всем этом вы узнаете из этого доклада.
Recommandé
Contenu connexe
Tendances
Tendances (10)
En vedette
Similaire à Верстка Canvas, Алексей Охрименко, MoscowJS 31
Similaire à Верстка Canvas, Алексей Охрименко, MoscowJS 31 (20)
Plus de MoscowJS
Plus de MoscowJS (20)
Dernier
Dernier (9)
Верстка 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