Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
Next
Download to read offline and view in fullscreen.

3

Share

Download to read offline

Верстка Canvas, Алексей Охрименко, MoscowJS 31

Download to read offline

Зачем? Как и когда нужно создавать пользовательский интерфейс с помощью Canvas и как обогнать React Native - обо всем этом вы узнаете из этого доклада.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Верстка Canvas, Алексей Охрименко, MoscowJS 31

  1. 1. Верстка Canvas-ом Алексей Охрименко Twitter: @Ai_boy Telegram: Ai_boy IPONWEB
  2. 2. IPONWEB
  3. 3. Зачем?
  4. 4. https://www.youtube.com/watch?v=QszjZfvl9vw
  5. 5. about:blank
  6. 6. about:blank yoursite.com
  7. 7. about:blank yoursite.com
  8. 8. 19 properties 37 methods http://www.w3schools.com/tags/ref_canvas.asp
  9. 9. 19 properties 37 methods http://www.w3schools.com/tags/ref_canvas.asp
  10. 10. Retained Mode VS Immediate Mode https://www.kirupa.com/html5/dom_vs_canvas.htm
  11. 11. Как?
  12. 12. <!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>
  13. 13. <!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>
  14. 14. <!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>
  15. 15. <!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>
  16. 16. <!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>
  17. 17. Ai2Canvas
  18. 18. https://www.youtube.com/watch?v=MviAo7wc9go
  19. 19. http://blog.mikeswanson.com/ai2canvas
  20. 20. If then else Design.js Logic.js
  21. 21. If then else Design.js Logic.js
  22. 22. If then else Design.js Logic.js
  23. 23. React-canvas http://engineering.flipboard.com/2015/02/mobile-web/ https://github.com/Flipboard/react-canvas
  24. 24. Zebra Kit
  25. 25. http://www.zebkit.com
  26. 26. http://repo.zebkit.org/latest/samples/uidemo.html
  27. 27. 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);
  28. 28. 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);
  29. 29. 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);
  30. 30. 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);
  31. 31. 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);
  32. 32. 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);
  33. 33. 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);
  34. 34. 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);
  35. 35. Быстрее чем React Native
  36. 36. https://www.ludei.com
  37. 37. 23 FPS VS 119 FPS
  38. 38. Когда использовать Canvas?
  39. 39. FAQ Алексей Охрименко Twitter: @Ai_boy Telegram: Ai_boy IPONWEB http://bit.ly/296D9Qf
  • AlexanderKazantsev3

    Oct. 10, 2018
  • VladimirBloshchitsyn

    May. 7, 2017
  • VladBalabash

    Oct. 5, 2016

Зачем? Как и когда нужно создавать пользовательский интерфейс с помощью Canvas и как обогнать React Native - обо всем этом вы узнаете из этого доклада.

Views

Total views

624

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

8

Shares

0

Comments

0

Likes

3

×