Embed Size (px)
Citation preview
Верстка Canvas-омАлексей Охрименко
Twitter: @Ai_boy
Telegram: Ai_boy
IPONWEB
IPONWEB
Зачем?
19 properties37 methods
http://www.w3schools.com/tags/ref_canvas.asp
19 properties37 methods
http://www.w3schools.com/tags/ref_canvas.asp
Retained Mode VS
Immediate Mode
https://www.kirupa.com/html5/dom_vs_canvas.htm
Как?
<!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>
<!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>
<!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>
<!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>
<!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>
Ai2Canvas
If then else
Design.js Logic.js
If then else
Design.js Logic.js
If then else
Design.js Logic.js
React-canvas
http://engineering.flipboard.com/2015/02/mobile-web/
https://github.com/Flipboard/react-canvas
Zebra Kit
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);
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);
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);
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);
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);
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);
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);
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);
Быстрее чем React Native
23 FPS VS 119 FPS
Когда использовать Canvas?
FAQАлексей Охрименко
Twitter: @Ai_boy
Telegram: Ai_boy
IPONWEB
http://bit.ly/296D9Qf
