Download to read offline
Uploaded byMoscowJS
Верстка Canvas, Алексей Охрименко, MoscowJS 31
The document discusses the use of canvas for web development, highlighting various properties and methods associated with it. It includes example code for drawing on a canvas and references to additional resources such as videos and libraries like zebra and react-canvas. The author poses questions about when to use canvas and compares its performance with alternatives like React Native.
Верстка Canvas, Алексей Охрименко, MoscowJS 31
- 1. Верстка Canvas-ом Алексей Охрименко Twitter:@Ai_boy Telegram: Ai_boy IPONWEB
- 2.
- 4.
- 5.
- 6.
- 7.
- 8.
- 17.
- 18.
- 19.
- 23.
- 24. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <scripttype="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"/> <scripttype="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"/> <scripttype="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"/> <scripttype="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"/> <scripttype="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.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 38.
- 39.
- 40.
- 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. Быстрее чем ReactNative
- 51.
- 52. 23 FPS VS119 FPS
- 54.
- 55. FAQ Алексей Охрименко Twitter: @Ai_boy Telegram:Ai_boy IPONWEB http://bit.ly/296D9Qf