{"id":257549,"date":"2015-05-19T21:43:03","date_gmt":"2015-05-19T17:43:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=257549"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=257549","title":{"rendered":"HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0430 Canvas"},"content":{"rendered":"<p>             Canvas \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0438 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0439 HTML5 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u041e\u043d \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a\u0430\u043a \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043e \u0441\u044e\u0436\u0435\u0442\u0443 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0437\u0430\u0441\u0442\u0430\u0432\u043a\u0438. \u041e\u0434\u043d\u0430\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0441 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u043d\u0430 Canvas \u0437\u0430\u0434\u0430\u0447\u0430 \u0443\u0436\u0435 \u043d\u0435 \u0442\u0430\u043a\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/572\/d0c\/9d9\/572d0c9d969a4b298dddb02b905ead0b.jpg\" alt=\"Image - html page on canvas\"\/><\/p>\n<p>  \u0426\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u044c\u0438:  <\/p>\n<ul>\n<li>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Canvas \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/li>\n<li>\u041f\u043e\u043d\u044f\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u0438 \u0441\u0442\u043e\u0438\u0442 \u043b\u0438 \u043e\u0432\u0447\u0438\u043d\u043a\u0430 \u0432\u044b\u0434\u0435\u043b\u043a\u0438.<\/li>\n<\/ul>\n<p><a name=\"habracut\"><\/a><br \/>  \u0421\u0438\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b:  <\/p>\n<ul>\n<li>Canvas \u043b\u0435\u0433\u043a\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 HTML DOM, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0442\u0438\u043f\u043e\u0432\u043e\u0439 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/li>\n<li>Canvas \u0431\u044b\u0441\u0442\u0440, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u043c\u0435\u0435\u0442 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0435 API \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442.<\/li>\n<\/ul>\n<p>  \u0421\u043b\u0430\u0431\u044b\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b:  <\/p>\n<ul>\n<li>Canvas \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f HTML DOM, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043d\u0430 Canvas \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/li>\n<li>\u041d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 API \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043f\u0440\u043e\u0441\u0442, \u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 JavaScript \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0432\u0435\u0434\u0451\u0442 \u043a \u043d\u0435\u0438\u0437\u0431\u0435\u0436\u043d\u043e\u0439 \u043f\u043e\u0442\u0435\u0440\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0447\u0442\u043e, \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u0447\u0451\u0442\u0435, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f Canvas.<\/li>\n<\/ul>\n<p>  \u041b\u0443\u0447\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u2014 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440. \u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u043d\u043e\u0435 \u043e\u0431\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0432 \u0440\u0430\u0437\u0440\u043e\u0437\u043d\u0435\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c, \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0432\u0448\u0438\u0441\u044c \u0441 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430\u043c\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c:<\/p>\n<p>  <a href=\"http:\/\/www.w3schools.com\/tags\/ref_canvas.asp\">Canvas \u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a<\/a><br \/>  <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Canvas_API\/Tutorial\">Canvas \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435<\/a><br \/>  <a href=\"http:\/\/www.html5canvastutorials.com\/\">Canvas \u043f\u0440\u0438\u043c\u0435\u0440\u044b<\/a><br \/>  <a href=\"http:\/\/www.ibm.com\/developerworks\/ru\/library\/wa-htmlmark\/\">\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0447\u0430\u0441\u0442\u044c 1<\/a><br \/>  <a href=\"http:\/\/www.ibm.com\/developerworks\/ru\/library\/wa-htmlmark2\/\">\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0447\u0430\u0441\u0442\u044c 2<\/a><\/p>\n<p>  <a href=\"https:\/\/github.com\/apelserg\/stencil-html-integrate-page-on-canvas\">\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043d\u0430 GitHab-e (\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c htm \u0444\u0430\u0439\u043b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441 \u0434\u0438\u0441\u043a\u0430)<\/a><br \/>  <a href=\"http:\/\/www.apelserg.ru\/open-html5-stencils\/stencil-html-integrate-page-on-canvas\/html-integrate-page-on-canvas.htm\">\u0414\u0435\u043c\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 (\u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442)<\/a><\/p>\n<h4> \u0420\u0430\u0431\u043e\u0447\u0435\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 <\/h4>\n<p>  <b>\u0421\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438:<\/b><\/p>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f FF (Windows, Linux Mint).<br \/>  \u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 CR \u0438 IE (Windows).<br \/>  \u0414\u0430\u043b\u0435\u0435 \u2014 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0433\u0430\u0434\u0436\u0435\u0442\u044b (\u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u043a\u043e\u043d\u0446\u0435).<\/p>\n<p>  IDE \u043f\u043e\u0434 Widows \u2014 Visual Studio Community, Notepad. \u0421\u0442\u0443\u0434\u0438\u044f \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430, \u0445\u043e\u0440\u043e\u0448\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u0434, \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u044f\u0432\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d\u0430 \u0441\u043a\u043e\u0431\u043a\u0430).<br \/>  IDE \u043f\u043e\u0434 Linux \u2014 gedit.<\/p>\n<p>  <b>\u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434:<\/b><\/p>\n<p>  Frontend, \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0435\u0440\u0432\u0435\u0440.<br \/>  \u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 API \u0431\u0435\u0437 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043d\u0435 \u0441\u0430\u043c\u043e\u0446\u0435\u043b\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u043d\u0438\u0445.<\/p>\n<p>  <b>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043a\u043e\u0434\u0430:<\/b><\/p>\n<p>  \u041a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0437\u0430\u043f\u0438\u0445\u043d\u0443\u0442\u044c \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b (\u043a\u043e\u0434\u0430 \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e). \u041d\u043e, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435, \u043b\u0443\u0447\u0448\u0435 \u0435\u0433\u043e \u0440\u0430\u0437\u043d\u0435\u0441\u0442\u0438 \u043f\u043e \u0444\u0430\u0439\u043b\u0430\u043c:<\/p>\n<p>  HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430: html_page_on_canvas.htm<br \/>  \u041e\u0431\u0449\u0438\u0439 \u043a\u043e\u0434: html_page_on_canvas_main.js<br \/>  \u041a\u043e\u0434 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u044c\u044e: html_page_on_canvas_model.js<br \/>  \u041a\u043e\u0434 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u043d\u0430 Canvas: html_page_on_canvas_canva.js<\/p>\n<p>  <b>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/b><\/p>\n<p>  \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u2014 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e. \u0411\u0435\u0437 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u2014 \u0436\u0438\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u043e. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u0430 \u0441\u043e\u0437\u0434\u0430\u043d \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 APELSERG, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n<p>  MAIN: \u043e\u0431\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<br \/>  MODEL: \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438<br \/>  MODEL.DATA: \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438<br \/>  CANVA: \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043c\u043e\u0434\u0435\u043b\u0438<br \/>  CONFIG: \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/p>\n<h4> \u041c\u043e\u0434\u0435\u043b\u044c <\/h4>\n<p>  \u0412 \u043e\u0441\u043d\u043e\u0432\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u0435\u0436\u0438\u0442 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 MVC \u0448\u0430\u0431\u043b\u043e\u043d:<\/p>\n<p>  \u0420\u043e\u043b\u044c Model \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 MODEL.DATA<br \/>  \u0420\u043e\u043b\u044c View \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 CANVA<br \/>  \u0420\u043e\u043b\u044c Controller \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 MODEL<\/p>\n<p>  \u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041a\u043e\u043c\u0443 \u043a\u0430\u043a, \u0430 \u043c\u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430 \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0445 \u0431\u0430\u043d\u043d\u0435\u0440\u0430\u0445 \u0438\u0434\u0451\u0442 \u0441\u043d\u0435\u0433. \u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b, \u0447\u0442\u043e\u0431\u044b \u0441\u043d\u0435\u0433 \u0448\u0451\u043b \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u0444\u043e\u043d\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0422\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c. \u0412 \u043e\u0431\u0449\u0435\u043c-\u0442\u043e \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043c\u0430\u0433\u0438\u0438 \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442 \u2014 Canvas \u0438 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<p>  \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0430 \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442:<\/p>\n<pre><code class=\"javascript\">APELSERG.MODEL.Flake = function (flakeX, flakeY, flakeSize, flakeColor) {     this.BaseX = flakeX;         this.X = flakeX;     this.Y = flakeY;     this.Size = flakeSize;     this.Color = flakeColor; } <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u043d\u043e \u0443\u0447\u0435\u0441\u0442\u044c, \u0447\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0438 \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 X \u0438 Y.<\/p>\n<p>  \u0414\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043d\u0435\u0433\u043e\u043f\u0430\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043d\u0435\u0436\u0438\u043d\u043e\u043a:<\/p>\n<pre><code class=\"javascript\">APELSERG.MODEL.MakeFlakes = function (flakeNum) {      var flakes = [];     var color = &quot;white&quot;;      for(var n = 0; n &lt; flakeNum; n++) {          var x = Math.round(Math.random() * APELSERG.CONFIG.SET.PicWidth);         var y = Math.round(Math.random() * APELSERG.CONFIG.SET.PicHeight);         var s = n % APELSERG.CONFIG.SET.FlakesSize;         var flake = new APELSERG.MODEL.Flake(x, y, s, color);          flakes.push(flake);     }     return flakes; } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442:<\/p>\n<pre><code class=\"javascript\">APELSERG.MODEL.ContentLine = function (text, textX, textY, textColor) {     this.Text = text;     this.X = textX;     this.Y = textY;     this.Color = textColor;     this.FontHeight = 0; } <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0443, \u043f\u043e\u043c\u0438\u043c\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f, \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u043e\u043d\u0442\u0430 \u2014 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e FontHeight. \u041a\u0430\u043a \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043f\u043e\u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0432\u0430 \u0438 \u0434\u0430\u0436\u0435 \u0431\u0443\u043a\u0432\u044b. \u0422\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u044b\u0435 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n<p>  \u0414\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u044b \u0434\u0435\u0442\u0441\u043a\u0438\u0435 \u0441\u0442\u0438\u0448\u043a\u0438 \u043d\u0430 \u0437\u0438\u043c\u043d\u044e\u044e \u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443:<\/p>\n<pre><code class=\"javascript\">ROOT.MODEL.MakeContent = function () {      var color = &quot;white&quot;;     var pointX = 0;     var pointY = ROOT.CONFIG.PROC.CanvaID.height; \/\/ \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043d\u0438\u0437\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b     var addY = 30; \/\/ \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f     var Cnt = 0;   \/\/ \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f      var content = [];      content.push(new ROOT.MODEL.ContentLine(&quot;\u0412 \u043b\u0435\u0441\u0443 \u0440\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u0451\u043b\u043e\u0447\u043a\u0430&quot;, pointX, pointY + addY * Cnt++, color));     content.push(new ROOT.MODEL.ContentLine(&quot;\u0412 \u043b\u0435\u0441\u0443 \u043e\u043d\u0430 \u0440\u043e\u0441\u043b\u0430&quot;, pointX, pointY + addY * Cnt++, color));     content.push(new ROOT.MODEL.ContentLine(&quot;\u0417\u0438\u043c\u043e\u0439 \u0438 \u043b\u0435\u0442\u043e\u043c \u0441\u0442\u0440\u043e\u0439\u043d\u0430\u044f&quot;, pointX, pointY + addY * Cnt++, color));     content.push(new ROOT.MODEL.ContentLine(&quot;\u0417\u0435\u043b\u0451\u043d\u0430\u044f \u0431\u044b\u043b\u0430&quot;, pointX, pointY + addY * Cnt++, color));      return content; } <\/code><\/pre>\n<p>  \u0421\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e\u0441\u0442\u0438 \u0440\u0430\u0434\u0438, \u043d\u0430\u0434\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u2014 \u043d\u0435 \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u043e. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430. \u0412 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0438\u0441\u0430.<\/p>\n<h4>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/h4>\n<p>  \u0414\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u2014 window.requestAnimationFrame. \u042d\u0442\u043e \u0442\u0438\u043f\u043e\u0432\u043e\u0439 \u043a\u043e\u0434 \u0435\u0451 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"javascript\">\/\/-- \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438  window.MyRequestAnimationFrame = (function (callback) {     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||           function (callback) {         window.setTimeout(callback, 1000 \/ 60);     }; })();  \/\/-- \u0441\u0442\u0430\u0440\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438  MyAnimation = function () {      \/\/-- \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438      \/\/-- \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0430 Canvas      \/\/-- \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0446\u0438\u043a\u043b     window.MyRequestAnimationFrame(function () {         MyAnimation();     }); } <\/code><\/pre>\n<p>  \u0418\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e requestAnimationFrame \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442 \u043f\u043e \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u0443 60 \u0440\u0430\u0437 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u041d\u043e \u043e\u043d \u0445\u043e\u0440\u043e\u0448 \u0442\u0435\u043c, \u0447\u0442\u043e \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 setTimeout \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d \u0441 \u0446\u0438\u043a\u043b\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0443\u043c\u0435\u0435\u0442 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0437\u0430\u043f\u0443\u0449\u0435\u043d. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e requestAnimationFrame <a href=\"http:\/\/html5.by\/blog\/what-is-requestanimationframe\/\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u0418\u0437 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0434\u043b\u044f \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430 \u044d\u0442\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0451\u043c\u043a\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u0442\u0430\u043a \u043a\u0430\u043a Canvas \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0447\u0442\u043e-\u0442\u043e \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438\u043b\u0438 \u043d\u0435\u0442. \u0411\u043e\u043b\u044c\u0448\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0443\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u0442\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>  \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 CONFIG.SET.CntHandle \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u0446\u0438\u043a\u043b\u0430\u043c requestAnimationFrame. \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439, \u043d\u043e \u0437\u0430\u0442\u043e \u043b\u0435\u0433\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439. \u041a\u0440\u0438\u0442\u0435\u0440\u0438\u0435\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u043b\u0443\u0436\u0438\u0442 \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0437\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435: \u0435\u0441\u043b\u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0441\u044f \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e \u2014 \u0437\u043d\u0430\u0447\u0438\u0442, \u0432\u0441\u0451 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e. \u041e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f CONFIG.SET.CntHandle.<\/p>\n<p>  \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 window.requestAnimationFrame \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0435\u0437 \u043e\u0431\u0451\u0440\u0442\u043a\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u043c\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430\u043c\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"javascript\">APELSERG.MAIN.Animation = function () {      (APELSERG.CONFIG.SET.CntHandle &gt; APELSERG.CONFIG.PROC.CntHandle)         ? (APELSERG.CONFIG.PROC.CntHandle++)         : (APELSERG.CONFIG.PROC.CntHandle = 0);      if (APELSERG.CONFIG.PROC.CntHandle == 0) APELSERG.CANVA.Rewrite();     if (APELSERG.CONFIG.PROC.CntHandle == 1) APELSERG.MODEL.UpdateContent();     if (APELSERG.CONFIG.PROC.CntHandle == 2) APELSERG.MODEL.UpdateFlakes();      window.requestAnimationFrame(function () {         APELSERG.MAIN.Animation();     }); } <\/code><\/pre>\n<p>  \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0439:  <\/p>\n<ul>\n<li>\u041a\u0440\u0438\u0442\u0435\u0440\u0438\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438. \u0422\u043e \u0435\u0441\u0442\u044c, \u0435\u0441\u043b\u0438 \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c, \u0442\u043e \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u0432 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0435 \u043d\u0430 Canvas. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0445\u043c\u0430\u0442\u043d\u0443\u044e \u043f\u0430\u0440\u0442\u0438\u044e \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0433\u043e \u0445\u043e\u0434\u0430. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c, \u0442\u043e, \u0432 \u0440\u044f\u0434\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043c\u043e\u0436\u043d\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440.<\/li>\n<li>RequestAnimationFrame \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u0442\u0430\u043a, \u0447\u0442\u043e \u043d\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u043c\u0435\u0436\u0434\u0443 \u0432\u044b\u0437\u043e\u0432\u0430\u043c\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d, \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0410 \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u0447\u0430\u0441\u0442\u043e \u0431\u044b\u0432\u0430\u0435\u0442 \u0432\u0430\u0436\u043d\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u043e\u0432. \u0426\u0438\u043a\u043b \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 setTimeout (\u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e).<\/li>\n<\/ul>\n<p>  \u041a\u0440\u0438\u0442\u0435\u0440\u0438\u0438 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043d\u0435\u0433\u0430 \u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430 \u0438 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430.<\/p>\n<p>  \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u043d\u0435\u0436\u0438\u043d\u043e\u043a (\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438):<\/p>\n<pre><code class=\"javascript\">APELSERG.MODEL.UpdateFlakes = function () {      for (var n = 0 in APELSERG.MODEL.DATA.Flakes) {          var flake = APELSERG.MODEL.DATA.Flakes[n];          var dir = 1;         if (Math.round(Math.random() * 100) % 2 == 0) dir = -1;          var shift = Math.round(Math.random() * 100) % 3;         var move = Math.round(Math.random() * 100) % 2 + APELSERG.CONFIG.SET.FlakesMove;          \/\/ \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0435\u0431\u0430\u043d\u0438\u0435 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438         if (((flake.X + shift * dir) &lt; (flake.BaseX + 10)) && ((flake.X + shift * dir) &gt; (flake.BaseX - 10))) {             flake.X += shift * dir;         }          \/\/ \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438         flake.Size += dir;         if (flake.Size &gt; APELSERG.CONFIG.SET.FlakesSize) flake.Size = APELSERG.CONFIG.SET.FlakesSize;         if (flake.Size &lt; 0) flake.Size = 0;          \/\/ \u043f\u0430\u0434\u0435\u043d\u0438\u0435 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438         flake.Y += move;         if (flake.Y &gt; APELSERG.CONFIG.SET.PicHeight) flake.Y = 1;     } } <\/code><\/pre>\n<p>  \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438):<\/p>\n<pre><code class=\"javascript\">APELSERG.MODEL.UpdateContent = function () {      for (var n = 0; APELSERG.MODEL.DATA.Content.length &gt; n; n++) {          var contentLine = APELSERG.MODEL.DATA.Content[n];          \/\/ \u0441\u0434\u0432\u0438\u0433 \u0441\u0442\u0440\u043e\u043a\u0438         contentLine.Y -= APELSERG.CONFIG.SET.ContentMove;          \/\/ \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u0441\u0442\u0440\u043e\u043a\u0438         if (contentLine.Y &gt; 150 && contentLine.Y &lt; APELSERG.CONFIG.PROC.CanvaID.height - 50) {              if (contentLine.FontHeight &lt; APELSERG.CONFIG.SET.ContentFontSize) {                 contentLine.FontHeight++;             }         }         else {             if (contentLine.FontHeight &gt; 0) contentLine.FontHeight--;         }     } } <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0435\u0451 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043d\u0430 Canvas. \u0424\u043e\u043d\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0444\u043e\u0442\u043e. \u0412\u0441\u044e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043e\u0434\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">APELSERG.CANVA.Rewrite = function () {      var ctx = APELSERG.CONFIG.PROC.Ctx;      \/\/ \u0444\u043e\u043d     ctx.drawImage(APELSERG.CONFIG.PROC.Img, 0, 0);      \/\/ \u043a\u043e\u043d\u0442\u0435\u043d\u0442     for (var n = 0 in APELSERG.MODEL.DATA.Content) {          var content = APELSERG.MODEL.DATA.Content[n];          if (content.X &gt;= 0 && content.Y &gt;= 0 && content.FontHeight &gt; 0) {             ctx.font = content.FontHeight.toString() + &quot;px Arial&quot;;             ctx.textAlign = &quot;center&quot;;             ctx.fillStyle = content.Color;             ctx.fillText(content.Text, APELSERG.CONFIG.PROC.CanvaID.width \/ 2, content.Y);         }     }      \/\/ \u0441\u043d\u0435\u0433 (\u043f\u043e\u0432\u0435\u0440\u0445 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430)     for (var n = 0 in APELSERG.MODEL.DATA.Flakes) {          var flake = APELSERG.MODEL.DATA.Flakes[n];          ctx.beginPath();         ctx.arc(flake.X, flake.Y, flake.Size \/ 2, 0, 2 * Math.PI);         ctx.fillStyle = flake.Color;         ctx.fill();     } } <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043d\u043e\u043f\u043e\u043a \u0438 \u0441\u0441\u044b\u043b\u043e\u043a<\/h4>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u2014 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b (\u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u043d\u0430 \u0441\u043d\u0435\u0433 \u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442). \u041d\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0430 \u044d\u0442\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043d\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435, \u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043d\u0438\u0445 \u043c\u044b\u0448\u0438 \u0438\u043b\u0438 \u043a\u043b\u0438\u043a\u0435.<\/p>\n<p>  \u041e\u0431\u044a\u0435\u043a\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"javascript\">APELSERG.MODEL.Command = function (cmdCode, cmdName, cmdX, cmdY, lengthX, lengthY, cmdColor) {     this.Code = cmdCode;     this.Name = cmdName;     this.X = cmdX;     this.Y = cmdY;     this.LengthX = lengthX;     this.LengthY = lengthY;     this.Color = cmdColor;     this.SelectColor = 'red';     this.SelectCnt = 0;     this.SelectName = false;     this.ShowBorder = true;     this.FontHeight = 20; } <\/code><\/pre>\n<p>  \u041e\u0431\u044a\u0435\u043a\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u0441\u044b\u043b\u043a\u0443:<\/p>\n<pre><code class=\"javascript\">APELSERG.MODEL.Link = function (linkUrl, linkName, linkX, linkY, lengthX, lengthY, linkColor) {     this.Url = linkUrl;     this.Name = linkName;     this.X = linkX;     this.Y = linkY;     this.LengthX = lengthX;     this.LengthY = lengthY;     this.Color = linkColor;     this.SelectColor = 'lightblue';     this.SelectCnt = 0;     this.SelectName = false;     this.ShowBorder = false;     this.FontHeight = 20; } <\/code><\/pre>\n<p>  \u0425\u043e\u0442\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043f\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043f\u043e\u0445\u043e\u0436\u0438, \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f \u043e\u043d\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u043a\u0430\u043a \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u041f\u0440\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438 \u0435\u0451 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"javascript\">APELSERG.CONFIG.PROC.CanvaID.addEventListener('mousemove', function (event) {     APELSERG.CONFIG.PROC.MouseMoveX = event.clientX - APELSERG.CONFIG.PROC.CanvaID.offsetLeft - APELSERG.CONFIG.SET.PicBorder;     APELSERG.CONFIG.PROC.MouseMoveY = event.clientY - APELSERG.CONFIG.PROC.CanvaID.offsetTop - APELSERG.CONFIG.SET.PicBorder; }); <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043c\u044b\u0448\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441\u0441\u044b\u043b\u043a\u0438 \u0438\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<pre><code class=\"javascript\">APELSERG.MODEL.CheckMoveFrame = function (frame) {      if ((APELSERG.CONFIG.PROC.MouseMoveX &gt; frame.X)         && (APELSERG.CONFIG.PROC.MouseMoveX &lt; frame.X + frame.LengthX)         && (APELSERG.CONFIG.PROC.MouseMoveY &gt; frame.Y)         && (APELSERG.CONFIG.PROC.MouseMoveY &lt; frame.Y + frame.LengthY)) {          return true;     }     return false; } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u043c\u044b\u0448\u0438 \u043f\u043e\u043f\u0430\u043b \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442, \u0442\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e SelectName:<\/p>\n<pre><code class=\"javascript\">command.SelectName = APELSERG.MODEL.CheckMoveFrame(command); <\/code><\/pre>\n<p>  \u041f\u043e\u0445\u043e\u0436\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u0438\u043a:<\/p>\n<pre><code class=\"javascript\">APELSERG.CONFIG.PROC.CanvaID.addEventListener('click', function (event) {     APELSERG.CONFIG.PROC.MouseClickX = event.clientX - APELSERG.CONFIG.PROC.CanvaID.offsetLeft - APELSERG.CONFIG.SET.PicBorder;     APELSERG.CONFIG.PROC.MouseClickY = event.clientY - APELSERG.CONFIG.PROC.CanvaID.offsetTop - APELSERG.CONFIG.SET.PicBorder; });  APELSERG.MODEL.CheckClickFrame = function (frame) {      if ((APELSERG.CONFIG.PROC.MouseClickX &gt; frame.X)         && (APELSERG.CONFIG.PROC.MouseClickX &lt; frame.X + frame.LengthX)         && (APELSERG.CONFIG.PROC.MouseClickY &gt; frame.Y)         && (APELSERG.CONFIG.PROC.MouseClickY &lt; frame.Y + frame.LengthY)){          return true;     }     return false; } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043a\u043b\u0438\u043a \u043f\u043e\u043f\u0430\u043b \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442, \u0442\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e SelectCnt:<\/p>\n<pre><code class=\"javascript\">if (APELSERG.MODEL.CheckClickFrame(command)) command.SelectCnt = APELSERG.CONFIG.SET.CntSelect; <\/code><\/pre>\n<p>  SelectCnt \u0437\u0430\u0434\u0430\u0451\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0446\u0438\u043a\u043b\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0440\u0430\u043c\u043a\u0430.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0431\u044b\u043b\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u043d\u0430 \u043a\u0430\u043a\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u0435, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0443\u0436\u0435 \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0440\u0443\u0434\u0430.<\/p>\n<p>  \u0418\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u043a\u043e\u0440\u043e\u0442\u043a\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438\u044e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0438 \u0432\u043e\u0437\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0446\u0438\u043a\u043b\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>  \u0412 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435, \u0446\u0438\u043a\u043b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0444\u043e\u0440\u043c\u044b (APELSERG.MAIN.Animation() \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 APELSERG.MAIN.OnLoad()). \u0414\u043b\u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0430\u0434\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043e\u0437\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0446\u0438\u043a\u043b\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e requestAnimationFrame. \u041e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0444\u043b\u0430\u0433\u0430 APELSERG.CONFIG.PROC.Stop. \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u043b\u044f \u043e\u0442\u043c\u0435\u043d\u044b cancelAnimationFrame, \u0432 \u0435\u0434\u0438\u043d\u043e\u043c \u0446\u0438\u043a\u043b\u0435 \u0441 requestAnimationFrame, \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0443\u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u0446\u0438\u043a\u043b, \u0447\u0442\u043e \u0431\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e (\u043d\u043e\u0432\u044b\u0439 \u0446\u0438\u043a\u043b \u0432\u0441\u0451-\u0440\u0430\u0432\u043d\u043e \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442). \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u043e\u0437\u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0446\u0438\u043a\u043b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043d\u0430\u0434\u043e \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0444\u043b\u0430\u0433 APELSERG.CONFIG.PROC.Stop \u0438 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u0442\u044c APELSERG.MAIN.Animation(). \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u0434\u0432\u043e\u0439\u043d\u043e\u043c\u0443 \u043a\u043b\u0438\u043a\u0443 \u043c\u044b\u0448\u0438 \u0438\u043b\u0438 \u00abF2\u00bb \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u00abF1\u00bb \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0442\u043e \u0442\u043e\u0436\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430, \u043d\u043e \u0443\u0436\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c cancelAnimationFrame \u0438 \u0431\u0435\u0437 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0444\u043b\u0430\u0433\u0430 APELSERG.CONFIG.PROC.Stop. \u0412\u043e\u0437\u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043e \u0434\u0432\u043e\u0439\u043d\u043e\u043c\u0443 \u043a\u043b\u0438\u043a\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0435 \u0443\u0434\u0430\u0441\u0442\u0441\u044f, \u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u0448\u0430\u0442\u044c \u0441\u0431\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0439 \u0444\u043b\u0430\u0433 APELSERG.CONFIG.PROC.Stop. \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0432\u043e\u0437\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f, \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u00abF2\u00bb. \u041e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043f\u043e \u00abF1\u00bb \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u044b cancelAnimationFrame:<\/p>\n<pre><code class=\"javascript\">APELSERG.CONFIG.PROC.CanvaID.addEventListener('dblclick', function (event) {     if (APELSERG.CONFIG.PROC.Stop) {         APELSERG.CONFIG.PROC.Stop = false;         APELSERG.CONFIG.PROC.ShowCommands = false; \/\/-- \u0434\u043b\u044f \u0437\u0430\u0449\u0438\u0442\u044b \u043e\u0442 \u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0439         APELSERG.MAIN.Animation();     } });  window.addEventListener('keydown', function (event) {      if (event.keyCode == APELSERG.CONFIG.KEY.F1) {         window.cancelAnimationFrame(APELSERG.CONFIG.PROC.TimeoutID);     }      if (event.keyCode == APELSERG.CONFIG.KEY.F2) {          APELSERG.CONFIG.PROC.Stop = true;         window.cancelAnimationFrame(APELSERG.CONFIG.PROC.TimeoutID);          if(APELSERG.CONFIG.PROC.Stop) {             APELSERG.CONFIG.PROC.Stop = false;             APELSERG.CONFIG.PROC.ShowCommands = false; \/\/-- \u0434\u043b\u044f \u0437\u0430\u0449\u0438\u0442\u044b \u043e\u0442 \u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0439             APELSERG.MAIN.Animation();         }     } }); <\/code><\/pre>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0445 \u0437\u0430 \u0432\u0432\u043e\u0434 \u0434\u0430\u043d\u043d\u044b\u0445<\/h4>\n<p>  \u0421 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u043c\u0438 \u0437\u0430 \u0432\u0432\u043e\u0434 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0435 \u0442\u0430\u043a \u0432\u0441\u0451 \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e. \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435\/\u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c (\u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0438 &quot;+&quot; \u0438 &quot;-&quot;).<\/p>\n<p>  \u041d\u043e, \u0435\u0441\u043b\u0438 \u0432\u043e\u043f\u0440\u043e\u0441 \u0441\u0442\u043e\u0438\u0442 \u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0432\u0432\u043e\u0434\u0430 \u2014 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u043c \u0441\u043f\u0438\u0441\u043a\u0435 \u0438\u043b\u0438 \u0432\u0432\u043e\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 Canvas, \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0439 \u00ab\u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u0439\u00bb \u043f\u043e\u0434\u0445\u043e\u0434. \u0422\u043e \u0435\u0441\u0442\u044c, \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a Canvas, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 HTML DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438 \u043f\u0440\u044f\u0442\u0430\u0442\u044c \u0438\u0445 \u043f\u043e\u0434 Canvas \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 Z \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0418\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0432\u043e\u0434\u0430. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0432\u0443\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0432\u043e\u0434\u0430. \u041e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0432\u043e\u0434\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445 Canvas (\u0444\u0443\u043d\u043a\u0446\u0438\u044f APELSERG.MAIN.ShowSettingsTextSpeed()). \u0414\u0440\u0443\u0433\u043e\u0439 \u2014 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 Canvas (\u0444\u0443\u043d\u043a\u0446\u0438\u044f APELSERG.MAIN.ShowSettingsThemeSelect()). \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043e\u0431\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u043d\u043e \u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445 Canvas \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0440\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 (Ctrl+, Ctrl-).<\/p>\n<h4>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h4>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0431\u044b\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 (\u0421\u043d\u0435\u0433\u043e\u043f\u0430\u0434), \u043e\u043d \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d \u0442\u0435\u043c\u0430\u043c\u0438. \u0414\u043b\u044f \u0444\u043e\u043d\u0430 \u0442\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u044b \u0444\u043e\u0442\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0438 \u043e\u0442\u043b\u0430\u0434\u0438\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0443 Canvas.<\/p>\n<p>  \u0417\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0443 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">APELSERG.MAIN.CanvasSize = function () {      if (APELSERG.CONFIG.SET.PicWidth &lt; Math.round(window.innerWidth * 0.9) && APELSERG.CONFIG.PROC.CanvaID.width != APELSERG.CONFIG.SET.PicWidth) {         APELSERG.CONFIG.PROC.CanvaID.width = APELSERG.CONFIG.SET.PicWidth;     }     else if (APELSERG.CONFIG.SET.PicWidth &gt; Math.round(window.innerWidth * 0.9) && APELSERG.CONFIG.PROC.CanvaID.width != Math.round(window.innerWidth * 0.9)) {         APELSERG.CONFIG.PROC.CanvaID.width = Math.round(window.innerWidth * 0.9);     }      if (APELSERG.CONFIG.SET.PicHeight &lt; Math.round(window.innerHeight * 0.8) && APELSERG.CONFIG.PROC.CanvaID.height != APELSERG.CONFIG.SET.PicHeight) {         APELSERG.CONFIG.PROC.CanvaID.height = APELSERG.CONFIG.SET.PicHeight;     }     else if (APELSERG.CONFIG.SET.PicHeight &gt; Math.round(window.innerHeight * 0.8) && APELSERG.CONFIG.PROC.CanvaID.height != Math.round(window.innerHeight * 0.8)) {         APELSERG.CONFIG.PROC.CanvaID.height = Math.round(window.innerHeight * 0.8)     } } <\/code><\/pre>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u043c\u0443 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0443 \u2014 \u0435\u0441\u043b\u0438 \u0444\u043e\u0442\u043e \u0444\u043e\u043d\u0430 \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u043a\u043d\u0430 (\u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438), \u0442\u043e Canvas \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0444\u043e\u0442\u043e, \u0438\u043d\u0430\u0447\u0435 Canvas \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u043e\u043a\u043d\u0430.<\/p>\n<h4> \u0421\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c <\/h4>\n<p>  Canvas (\u043a\u0430\u043a \u0438 HTML5 \u0432 \u0446\u0435\u043b\u043e\u043c) \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u043e\u0432\u044b\u0439 \u0438 \u043d\u0435 \u0432\u0441\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442. \u0410 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430, \u0432\u0435\u0437\u0434\u0435 \u0438 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0441 \u043d\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0421\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u043d\u043e\u0432\u043e\u0439 \u0444\u0438\u0447\u0438. \u0420\u0435\u0448\u0430\u044e\u0449\u0438\u043c\u0438 \u0444\u0430\u043a\u0442\u043e\u0440\u0430\u043c\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u0442\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\/\u0438\u043b\u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u0430, \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u0447\u0441\u043a\u0440\u0438\u043d), \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430. \u041d\u0435 \u0434\u043e \u043d\u043e\u0432\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0438 \u043a\u0440\u0430\u0441\u043e\u0442, \u043a\u043e\u0433\u0434\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f.<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043a HTML5 \u0438 Canvas.<\/p>\n<p>  \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u2014 \u0432 \u0432\u0438\u0434\u0435 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u0441\u0451 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u0435\u043c\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u044d\u0442\u043e \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f.<\/p>\n<p>  \u0421\u043f\u0435\u0440\u0432\u0430, \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"javascript\">APELSERG.MAIN.CheckCompatible = function () {      if (!window.requestAnimationFrame || screen.width &lt; 1000) {          APELSERG.CONFIG.SET.CompatibleType = 1;     } } <\/code><\/pre>\n<p>  \u0418, \u0435\u0441\u043b\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 Canvas \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u043b\u0438 \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 APELSERG.MODEL.ContentAsHtmlText().<\/p>\n<h4> \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b Canvas <\/h4>\n<p>  Canvas \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u00ab\u043b\u0430\u0433\u0430\u0435\u0442\u00bb. \u041b\u0430\u0433\u0438 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u0430\u0436\u0435 \u043d\u0430 \u0441\u043b\u0430\u0431\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0435. \u0421\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u2014 \u0432\u0440\u0435\u043c\u044f \u0438 \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u043b\u0430\u0433\u043e\u0432 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u041e\u0421 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0421\u0443\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0432\u0438\u0434\u0438\u043c\u043e, \u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043f\u043e\u0442\u043e\u0447\u043d\u043e\u043c event loop-\u0435 \u0438\/\u0438\u043b\u0438 \u0432 garbage collector-\u0435.             <\/p>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/258331\/\"> http:\/\/habrahabr.ru\/post\/258331\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>             Canvas \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0438 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0439 HTML5 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u041e\u043d \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a\u0430\u043a \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043e \u0441\u044e\u0436\u0435\u0442\u0443 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0437\u0430\u0441\u0442\u0430\u0432\u043a\u0438. \u041e\u0434\u043d\u0430\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0441 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u043d\u0430 Canvas \u0437\u0430\u0434\u0430\u0447\u0430 \u0443\u0436\u0435 \u043d\u0435 \u0442\u0430\u043a\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/572\/d0c\/9d9\/572d0c9d969a4b298dddb02b905ead0b.jpg\" alt=\"Image - html page on canvas\"\/><\/p>\n<p>  \u0426\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u044c\u0438:  <\/p>\n<ul>\n<li>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Canvas \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/li>\n<li>\u041f\u043e\u043d\u044f\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u0438 \u0441\u0442\u043e\u0438\u0442 \u043b\u0438 \u043e\u0432\u0447\u0438\u043d\u043a\u0430 \u0432\u044b\u0434\u0435\u043b\u043a\u0438.<\/li>\n<\/ul>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-257549","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/257549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=257549"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/257549\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=257549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=257549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=257549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}