{"id":244545,"date":"2014-11-30T00:57:03","date_gmt":"2014-11-29T20:57:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=244545"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=244545","title":{"rendered":"<span class=\"post_title\">\u0412\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 JavaScript: \u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435<\/span>"},"content":{"rendered":"<div class=\"content html_format\">\n<h4>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h4>\n<p>  <\/p>\n<ul>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/240219\/\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/240223\/\">\u0412\u0435\u043b\u0438\u0447\u0438\u043d\u044b, \u0442\u0438\u043f\u044b \u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/240225\/\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/240349\/\">\u0424\u0443\u043d\u043a\u0446\u0438\u0438<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/240813\/\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445: \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u044b<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/241155\/\">\u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/241587\/\">\u0422\u0430\u0439\u043d\u0430\u044f \u0436\u0438\u0437\u043d\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/241776\/\">\u041f\u0440\u043e\u0435\u043a\u0442: \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u0436\u0438\u0437\u043d\u044c<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/242609\/\">\u041f\u043e\u0438\u0441\u043a \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/242695\/\">\u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/243273\/\">\u041c\u043e\u0434\u0443\u043b\u0438<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/243277\/\">\u041f\u0440\u043e\u0435\u043a\u0442: \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/243311\/\">JavaScript \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/243815\/\">Document Object Model<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/244041\/\">\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/244405\/\">\u041f\u0440\u043e\u0435\u043a\u0442: \u0438\u0433\u0440\u0430-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/244545\/\">\u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435<\/a><\/li>\n<li>HTTP<\/li>\n<li>\u0424\u043e\u0440\u043c\u044b \u0438 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430<\/li>\n<li>\u041f\u0440\u043e\u0435\u043a\u0442: Paint<\/li>\n<li>Node.js<\/li>\n<li>\u041f\u0440\u043e\u0435\u043a\u0442: \u0432\u0435\u0431-\u0441\u0430\u0439\u0442 \u043f\u043e \u043e\u0431\u043c\u0435\u043d\u0443 \u0443\u043c\u0435\u043d\u0438\u044f\u043c\u0438<\/li>\n<li><a href=\"http:\/\/eloquentjavascript.net\/code\">\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u0434\u043b\u044f \u043a\u043e\u0434\u0430<\/a><\/li>\n<\/ul>\n<p>  <i>\u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u043e\u0431\u043c\u0430\u043d.<br \/>  \u041c.\u041a.\u042d\u0448\u0435\u0440<\/i><\/p>\n<p>  \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u041f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0441\u0446\u0432\u0435\u0442\u043a\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 DOM. \u0422\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043c\u043d\u043e\u0433\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0433\u0440\u044b \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u044b. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0443\u0437\u043b\u0430\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0434\u0430\u0442\u044c \u0438\u043c \u043b\u044e\u0431\u043e\u0439 \u043d\u0443\u0436\u043d\u044b\u0439 \u0432\u0438\u0434. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0438\u0441\u043a\u0430\u0436\u0430\u0442\u044c \u0443\u0437\u043b\u044b \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0438\u043b\u044c transform.<\/p>\n<p>  \u041d\u043e \u0442\u0430\u043a\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 DOM \u2013 \u043d\u0435 \u0442\u043e, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0442\u0438\u043f\u0430 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438, \u043a\u0440\u0430\u0439\u043d\u0435 \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 HTML.<\/p>\n<p>  \u0415\u0441\u0442\u044c \u0434\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b. \u041f\u0435\u0440\u0432\u0430\u044f \u2013 SVG, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430, \u0442\u0430\u043a\u0436\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 DOM, \u043d\u043e \u0431\u0435\u0437 \u0443\u0447\u0430\u0441\u0442\u0438\u044f HTML. SVG \u2013 \u0434\u0438\u0430\u043b\u0435\u043a\u0442 \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0444\u043e\u0440\u043c\u0430\u0445, \u0430 \u043d\u0435 \u0442\u0435\u043a\u0441\u0442\u0435. SVG \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432 HTML, \u0438\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0442\u0435\u0433 <code>&lt;img&gt;<\/code>.<\/p>\n<p>  \u0412\u0442\u043e\u0440\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u2013 \u0445\u043e\u043b\u0441\u0442 (canvas). \u0425\u043e\u043b\u0441\u0442 \u2013 \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 DOM, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430. \u041e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 API \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u043e\u0440\u043c \u043d\u0430 \u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u0445\u043e\u043b\u0441\u0442\u043e\u043c \u0438 SVG \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 SVG \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0444\u043e\u0440\u043c \u2013 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0438\u043b\u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440. \u0425\u043e\u043b\u0441\u0442 \u0436\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0444\u043e\u0440\u043c\u044b \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 (\u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0440\u0430\u0441\u0442\u0440\u0430), \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u0442 \u0438\u0445, \u0438 \u043d\u0435 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u044d\u0442\u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u0444\u043e\u0440\u043c\u0430 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0445\u043e\u043b\u0441\u0442 (\u0438\u043b\u0438 \u0442\u0443 \u0447\u0430\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043a\u0440\u0443\u0436\u0430\u0435\u0442 \u0444\u043e\u0440\u043c\u0443) \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0435\u0451 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h4>SVG<\/h4>\n<p>  \u042d\u0442\u0430 \u043a\u043d\u0438\u0433\u0430 \u043d\u0435 \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u0432 SVG, \u043d\u043e \u043a\u0440\u0430\u0442\u043a\u043e \u044f \u043f\u043e\u044f\u0441\u043d\u044e \u0435\u0451 \u0440\u0430\u0431\u043e\u0442\u0443. \u0412 \u043a\u043e\u043d\u0446\u0435 \u0433\u043b\u0430\u0432\u044b \u044f \u0432\u0435\u0440\u043d\u0443\u0441\u044c \u043a \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0430\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0432\u044b\u0431\u0438\u0440\u0430\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0412\u043e\u0442 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 HTML, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043f\u0440\u043e\u0441\u0442\u0443\u044e SVG-\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443:<\/p>\n<pre><code class=\"html\">&lt;p&gt;Normal HTML here.&lt;\/p&gt; &lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;   &lt;circle r=&quot;50&quot; cx=&quot;50&quot; cy=&quot;50&quot; fill=&quot;red&quot;\/&gt;   &lt;rect x=&quot;120&quot; y=&quot;5&quot; width=&quot;90&quot; height=&quot;90&quot;         stroke=&quot;blue&quot; fill=&quot;none&quot;\/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<p>  \u0410\u0442\u0440\u0438\u0431\u0443\u0442 xmlns \u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438\u043c\u0451\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 URL \u0438 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0434\u0438\u0430\u043b\u0435\u043a\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0433\u043e\u0432\u043e\u0440\u0438\u043c. \u0422\u044d\u0433\u0438  \u0438 , \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0432 HTML, \u0438\u043c\u0435\u044e\u0442 \u0441\u043c\u044b\u0441\u043b \u0432 SVG \u2013 \u043e\u043d\u0438 \u0440\u0438\u0441\u0443\u044e\u0442 \u0444\u043e\u0440\u043c\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0442\u0438\u043b\u044c \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u044e, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438.<\/p>\n<p>  \u041e\u043d\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0442\u044d\u0433\u0438 HTML. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u043c\u0435\u043d\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430  \u043d\u0430 cyan:<\/p>\n<p>  var circle = document.querySelector(\u00abcircle\u00bb);<br \/>  circle.setAttribute(\u00abfill\u00bb, \u00abcyan\u00bb);<\/p>\n<h4>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0445\u043e\u043b\u0441\u0442\u0430 canvas <\/h4>\n<p>  \u0413\u0440\u0430\u0444\u0438\u043a\u0443 \u0445\u043e\u043b\u0441\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <code>&lt;canvas&gt;<\/code>. \u0415\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044f \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445.<\/p>\n<p>  \u041d\u043e\u0432\u044b\u0439 \u0445\u043e\u043b\u0441\u0442 \u043f\u0443\u0441\u0442, \u0442\u043e \u0435\u0441\u0442\u044c \u043e\u043d \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u0435\u043d \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u043c \u043f\u0443\u0441\u0442\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u0422\u044d\u0433 <code>&lt;canvas&gt;<\/code> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c context \u2013 \u043e\u0431\u044a\u0435\u043a\u0442, \u0447\u044c\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u044d\u0442\u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u0421\u0435\u0439\u0447\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0448\u0438\u0440\u043e\u043a\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f: \u201c2d\u201d \u0434\u043b\u044f \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0438 \u201cwebgl\u201d \u0434\u043b\u044f \u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 OpenGL.<\/p>\n<p>  WebGL \u043c\u044b \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u043d\u0430 \u0434\u0432\u0443\u0445 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f\u0445. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b \u0442\u0440\u0438 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f, \u044f \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0432\u0430\u043c \u043e\u043a\u0443\u043d\u0443\u0442\u044c\u0441\u044f \u0432 \u043c\u0438\u0440 WebGL. \u041e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c\u0443 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u0436\u0435\u043b\u0435\u0437\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u043f\u0440\u044f\u043c\u043e \u0438\u0437 JavaScript.<\/p>\n<p>  Context \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u043c getContext \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;canvas&gt;<\/code>.<\/p>\n<pre><code class=\"javascript\">&lt;p&gt;Before canvas.&lt;\/p&gt; &lt;canvas width=&quot;120&quot; height=&quot;60&quot;&gt;&lt;\/canvas&gt; &lt;p&gt;After canvas.&lt;\/p&gt; &lt;script&gt;   var canvas = document.querySelector(&quot;canvas&quot;);   var context = canvas.getContext(&quot;2d&quot;);   context.fillStyle = &quot;red&quot;;   context.fillRect(10, 10, 100, 50); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 context \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0438\u0441\u0443\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0432 100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0438 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 \u0432 50, \u0441 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 \u043b\u0435\u0432\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0433\u043b\u0430 (10, 10).<\/p>\n<p>  \u0422\u043e\u0447\u043d\u043e \u043a\u0430\u043a \u0432 HTML (\u0438 SVG), \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f \u0445\u043e\u043b\u0441\u0442\u043e\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0442\u043e\u0447\u043a\u0443 (0, 0) \u0432 \u043b\u0435\u0432\u044b\u0439 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0443\u0433\u043e\u043b, \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043e\u0441\u0438 Y \u0438\u0434\u0451\u0442 \u043e\u0442\u0442\u0443\u0434\u0430 \u0432\u043d\u0438\u0437. \u0422\u043e \u0435\u0441\u0442\u044c, \u0442\u043e\u0447\u043a\u0430 (10,10) \u043d\u0430 10 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0438\u0436\u0435 \u0438 \u043f\u0440\u0430\u0432\u0435\u0435 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430.<\/p>\n<h4>\u0417\u0430\u043b\u0438\u0432\u043a\u0430 \u0438 \u043e\u0431\u0432\u043e\u0434\u043a\u0430<\/h4>\n<p>  \u0412 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u0445\u043e\u043b\u0441\u0442\u0430 \u0444\u043e\u0440\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043b\u0438\u0442\u044c, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c\u0430\u044f \u0435\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u0430 \u043d\u0443\u0436\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0438\u043b\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c, \u0438\u043b\u0438 \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c stroke \u2013 \u043e\u0431\u0432\u0435\u0441\u0442\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043b\u0438\u043d\u0438\u0435\u0439 \u043f\u043e \u043a\u0440\u0430\u044e. \u0422\u0430 \u0436\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 SVG.<\/p>\n<p>  \u041c\u0435\u0442\u043e\u0434 fillRect \u0437\u0430\u043b\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a. \u041e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043b\u0435\u0432\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0433\u043b\u0430 x,y, \u0437\u0430\u0442\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443. \u0421\u0445\u043e\u0436\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 strokeRect \u0440\u0438\u0441\u0443\u0435\u0442 \u043f\u0435\u0440\u0438\u043c\u0435\u0442\u0440 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430.<\/p>\n<p>  \u0411\u043e\u043b\u044c\u0448\u0435 \u0443 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043d\u0435\u0442. \u0426\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438, \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u043e\u0431\u0432\u043e\u0434\u043a\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 (\u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043e\u0436\u0438\u0434\u0430\u0442\u044c), \u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 context.<\/p>\n<p>  \u0417\u0430\u0434\u0430\u0432 fillStyle, \u0432\u044b \u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u0441\u043f\u043e\u0441\u043e\u0431, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0437\u0430\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u044b. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432 \u0441\u0442\u0440\u043e\u043a\u0443, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0443\u044e \u0446\u0432\u0435\u0442, \u0438 \u0432 \u043b\u044e\u0431\u043e\u0439 \u0446\u0432\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 CSS.<\/p>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e strokeStyle \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a \u0436\u0435, \u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0446\u0432\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430 \u043e\u0431\u0432\u043e\u0434\u043a\u0430. \u0422\u043e\u043b\u0449\u0438\u043d\u0430 \u043b\u0438\u043d\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c lineWidth, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e.<\/p>\n<pre><code class=\"javascript\">&lt;canvas&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   cx.strokeStyle = &quot;blue&quot;;   cx.strokeRect(5, 5, 50, 50);   cx.lineWidth = 5;   cx.strokeRect(135, 5, 50, 50); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b width \u0438\u043b\u0438 height, \u0438\u043c \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u044e\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2013 300 \u0434\u043b\u044f \u0448\u0438\u0440\u0438\u043d\u044b \u0438 150 \u0434\u043b\u044f \u0432\u044b\u0441\u043e\u0442\u044b.<\/p>\n<h4>\u041f\u0443\u0442\u0438<\/h4>\n<p>  \u041f\u0443\u0442\u044c \u2013 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043b\u0438\u043d\u0438\u0439. \u0414\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0439 \u0445\u043e\u043b\u0441\u0442 \u0438\u043c\u0435\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043f\u0443\u0442\u0435\u0439. \u0412\u0441\u0451 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b. \u041f\u0443\u0442\u0438 \u2013 \u043d\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u0434\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u0443\u0442\u0451\u043c, \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0435\u0433\u043e \u0444\u043e\u0440\u043c\u044b.<\/p>\n<pre><code class=\"javascript\">&lt;canvas&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   cx.beginPath();   for (var y = 10; y &lt; 100; y += 10) {     cx.moveTo(10, y);     cx.lineTo(90, y);   }   cx.stroke(); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043f\u0443\u0442\u044c \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0440\u0435\u0437\u043a\u043e\u0432, \u0438 \u0437\u0430\u0442\u0435\u043c \u043e\u0431\u0432\u043e\u0434\u0438\u0442 \u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u043c stroke. \u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0447\u0435\u0440\u0435\u0437 lineTo, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043f\u0443\u0442\u0438. \u042d\u0442\u0430 \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u2013 \u043e\u0431\u044b\u0447\u043d\u043e \u043a\u043e\u043d\u0435\u0446 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430, \u0435\u0441\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u0431\u044b\u043b\u043e \u0432\u044b\u0437\u043e\u0432\u0430 moveTo. \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u043d\u0430\u0447\u043d\u0451\u0442\u0441\u044f \u0441 \u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0432 moveTo.<\/p>\n<p>  \u041f\u0440\u0438 \u0437\u0430\u043b\u0438\u0432\u043a\u0435 \u043f\u0443\u0442\u0438 \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u0444\u043e\u0440\u043c \u0437\u0430\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u041f\u0443\u0442\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u043e\u0440\u043c \u2013 \u043a\u0430\u0436\u0434\u043e\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 moveTo \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e. \u041d\u043e \u043f\u0443\u0442\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u043c (\u043d\u0430\u0447\u0430\u043b\u043e \u0438 \u043a\u043e\u043d\u0435\u0446 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435), \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043a\u0440\u0430\u0441\u0438\u0442\u044c. \u0415\u0441\u043b\u0438 \u043f\u0443\u0442\u044c \u043d\u0435 \u0437\u0430\u043a\u0440\u044b\u0442, \u043e\u0442 \u0435\u0433\u043e \u043a\u043e\u043d\u0446\u0430 \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438\u043d\u0438\u044f, \u0438 \u0437\u0430\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u0430, \u043e\u0447\u0435\u0440\u0447\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u043c \u043f\u0443\u0442\u0451\u043c.<\/p>\n<pre><code class=\"javascript\">&lt;canvas&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   cx.beginPath();   cx.moveTo(50, 10);   cx.lineTo(10, 70);   cx.lineTo(90, 70);   cx.fill(); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0438\u0441\u0443\u0435\u0442 \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u0439 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a. \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0431\u044b\u043b\u0438 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b. \u0422\u0440\u0435\u0442\u044c\u044f, \u043e\u0442 \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u0443\u0433\u043b\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043a \u0432\u0435\u0440\u0448\u0438\u043d\u0435, \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442\u0441\u044f \u2013 \u043e\u043d\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u0430 \u0432\u044b\u0437\u043e\u0432\u043e\u043c stroke.<\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 closePath, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u043f\u0443\u0442\u044c, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0443\u0442\u0438. \u042d\u0442\u043e\u0442 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d \u0432\u044b\u0437\u043e\u0432\u043e\u043c stroke.<\/p>\n<h4>\u041a\u0440\u0438\u0432\u044b\u0435<\/h4>\n<p>  \u041f\u0443\u0442\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u043a\u0440\u0438\u0432\u044b\u0445. \u0418\u0445 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043d\u0435\u0436\u0435\u043b\u0438 \u043f\u0440\u044f\u043c\u044b\u0435.<\/p>\n<p>  \u041c\u0435\u0442\u043e\u0434 quadraticCurveTo \u0440\u0438\u0441\u0443\u0435\u0442 \u043a\u0440\u0438\u0432\u0443\u044e \u0434\u043e \u043d\u0443\u0436\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438. \u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u0440\u0438\u0432\u0438\u0437\u043d\u044b \u043c\u0435\u0442\u043e\u0434\u0443 \u0434\u0430\u0451\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0442\u043e\u0447\u043a\u043e\u0439 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u043a\u0430\u043a \u0431\u044b \u043f\u0440\u0438\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442 \u043b\u0438\u043d\u0438\u044e, \u0437\u0430\u0434\u0430\u0432\u0430\u044f \u043a\u0440\u0438\u0432\u043e\u0439 \u043a\u0440\u0438\u0432\u0438\u0437\u043d\u0443. \u041b\u0438\u043d\u0438\u044f \u043d\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0438 \u0432 \u0435\u0451 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0430\u0445 \u0431\u0443\u0434\u0443\u0442 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u044c\u0441\u044f \u043a \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u044d\u0442\u043e:<\/p>\n<pre><code class=\"javascript\">&lt;canvas&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   cx.beginPath();   cx.moveTo(10, 90);   \/\/ control=(60,10) goal=(90,90)   cx.quadraticCurveTo(60, 10, 90, 90);   cx.lineTo(60, 10);   cx.closePath();   cx.stroke(); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0420\u0438\u0441\u0443\u0435\u043c \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0437\u0430\u0434\u0430\u043d\u0430 \u043a\u0430\u043a (60,10), \u0430 \u0437\u0430\u0442\u0435\u043c \u0440\u0438\u0441\u0443\u0435\u043c \u0434\u0432\u0430 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430, \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0438 \u043d\u0430\u0447\u0430\u043b\u043e \u043b\u0438\u043d\u0438\u0438. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u044d\u043c\u0431\u043b\u0435\u043c\u0443 \u0417\u0432\u0451\u0437\u0434\u043d\u043e\u0433\u043e \u043f\u0443\u0442\u0438. \u041c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438: \u043b\u0438\u043d\u0438\u044f, \u0432\u044b\u0445\u043e\u0434\u044f\u0449\u0430\u044f \u0438\u0437 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u0435\u043a, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043a \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u0437\u0430\u0433\u0438\u0431\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  \u041c\u0435\u0442\u043e\u0434 bezierCurve \u0440\u0438\u0441\u0443\u0435\u0442 \u0441\u0445\u043e\u0436\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e. \u0412\u043c\u0435\u0441\u0442\u043e \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0443 \u043d\u0435\u0451 \u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u2013 \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u043d\u0446\u043e\u0432 \u043a\u0440\u0438\u0432\u043e\u0439. \u0412\u043e\u0442 \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u0440\u0438\u0441\u0443\u043d\u043e\u043a \u0434\u043b\u044f \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0439 \u043a\u0440\u0438\u0432\u043e\u0439:<\/p>\n<pre><code class=\"javascript\">&lt;canvas&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   cx.beginPath();   cx.moveTo(10, 90);   \/\/ control1=(10,10) control2=(90,10) goal=(50,90)   cx.bezierCurveTo(10, 10, 90, 10, 50, 90);   cx.lineTo(90, 10);   cx.lineTo(10, 10);   cx.closePath();   cx.stroke(); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0414\u0432\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0437\u0430\u0434\u0430\u044e\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0431\u043e\u0438\u0445 \u043a\u043e\u043d\u0446\u043e\u0432 \u043a\u0440\u0438\u0432\u043e\u0439. \u0427\u0435\u043c \u043e\u043d\u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043e\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043b\u0438 \u043a\u043e\u043d\u0446\u0430, \u0442\u0435\u043c \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u043a\u0440\u0438\u0432\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u0443\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438.<\/p>\n<p>  \u0421 \u044d\u0442\u0438\u043c\u0438 \u043a\u0440\u0438\u0432\u044b\u043c\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0432\u0430\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u2013 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0430\u043a \u0438\u0441\u043a\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0443\u0442 \u043a \u043d\u0443\u0436\u043d\u043e\u0439 \u0432\u0430\u043c \u0444\u043e\u0440\u043c\u0435. \u0418\u043d\u043e\u0433\u0434\u0430 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c, \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u043f\u0440\u043e\u0431 \u0438 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<p>  \u0414\u0443\u0433\u0438, \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u0440\u0443\u0433\u043e\u0432, \u043b\u0435\u0433\u0447\u0435 \u0432 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438. \u041c\u0435\u0442\u043e\u0434 arcTo \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0446\u0435\u043b\u044b\u0445 \u043f\u044f\u0442\u044c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u0435\u0440\u0432\u044b\u0435 \u0447\u0435\u0442\u044b\u0440\u0435 \u2013 \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b quadraticCurveTo. \u041f\u0435\u0440\u0432\u0430\u044f \u043f\u0430\u0440\u0430 \u0437\u0430\u0434\u0430\u0451\u0442 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438, \u0432\u0442\u043e\u0440\u0430\u044f \u2013 \u043c\u0435\u0441\u0442\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u0440\u0438\u0432\u043e\u0439. \u041f\u044f\u0442\u044b\u0439 \u0437\u0430\u0434\u0430\u0451\u0442 \u0440\u0430\u0434\u0438\u0443\u0441 \u0434\u0443\u0433\u0438. \u041c\u0435\u0442\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0441\u043a\u0440\u0443\u0433\u043b\u0451\u043d\u043d\u044b\u0439 \u0443\u0433\u043e\u043b \u2013 \u043b\u0438\u043d\u0438\u044e, \u0438\u0434\u0443\u0449\u0443\u044e \u043a \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u043a \u0442\u043e\u0447\u043a\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u2013 \u0438 \u0441\u043a\u0440\u0443\u0433\u043b\u044f\u0435\u0442 \u0443\u0433\u043e\u043b \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c. \u041c\u0435\u0442\u043e\u0434 arcTo \u0440\u0438\u0441\u0443\u0435\u0442 \u043a\u0440\u0443\u0433\u043b\u0443\u044e \u0447\u0430\u0441\u0442\u044c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043b\u0438\u043d\u0438\u044e \u043e\u0442 \u0442\u043e\u0447\u043a\u0438 \u0441\u0442\u0430\u0440\u0442\u0430 \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0451\u043d\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.<\/p>\n<pre><code class=\"javascript\">&lt;canvas&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   cx.beginPath();   cx.moveTo(10, 10);   \/\/ control=(90,10) goal=(90,90) radius=20   cx.arcTo(90, 10, 90, 90, 20);   cx.moveTo(10, 10);   \/\/ control=(90,10) goal=(90,90) radius=80   cx.arcTo(90, 10, 90, 90, 80);   cx.stroke(); &lt;\/script&gt; <\/code><\/pre>\n<p>  arcTo \u043d\u0435 \u0440\u0438\u0441\u0443\u0435\u0442 \u043b\u0438\u043d\u0438\u044e \u043e\u0442 \u043a\u043e\u043d\u0446\u0430 \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0451\u043d\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0434\u043e \u0442\u043e\u0447\u043a\u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0441\u0432\u043e\u0451 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435. \u0415\u0451 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 lineTo \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u0436\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0440\u0443\u0433, \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 arcTo, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u043e\u0432\u0451\u0440\u043d\u0443\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043d\u0430 90 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432. \u041d\u043e \u043c\u0435\u0442\u043e\u0434 arc \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u043e\u0449\u0435. \u041e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0430\u0440\u0443 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 \u0430\u0440\u043a\u0438, \u0440\u0430\u0434\u0438\u0443\u0441 \u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0443\u0433\u043b\u044b.<\/p>\n<p>  \u0414\u0432\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0432 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0438 \u0447\u0430\u0441\u0442\u0438 \u043a\u0440\u0443\u0433\u0430. \u0423\u0433\u043b\u044b \u0438\u0437\u043c\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0432 \u0440\u0430\u0434\u0438\u0430\u043d\u0430\u0445, \u0430 \u043d\u0435 \u0433\u0440\u0430\u0434\u0443\u0441\u0430\u0445. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u0440\u0443\u0433 \u0438\u043c\u0435\u0435\u0442 \u0443\u0433\u043e\u043b \u0432 2\u03c0, \u0438\u043b\u0438 2 * Math.PI, \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0432\u043d\u043e 6.28. \u0423\u0433\u043e\u043b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0442\u0441\u0447\u0451\u0442 \u043e\u0442 \u0442\u043e\u0447\u043a\u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430, \u0438 \u0438\u0434\u0451\u0442 \u043f\u0440\u043e\u0442\u0438\u0432 \u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0438. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u0440\u0443\u0433, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u043e \u0432 0, \u0430 \u043a\u043e\u043d\u0435\u0446 \u0431\u043e\u043b\u044c\u0448\u0435 2\u03c0 (\u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, 7).<\/p>\n<pre><code class=\"javascript\">&lt;canvas&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   cx.beginPath();   \/\/ center=(50,50) radius=40 angle=0 to 7   cx.arc(50, 50, 40, 0, 7);   \/\/ center=(150,50) radius=40 angle=0 to \u00bd\u03c0   cx.arc(150, 50, 40, 0, 0.5 * Math.PI);   cx.stroke(); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u043d\u0438\u044f \u0441\u043b\u0435\u0432\u0430 \u043e\u0442 \u043a\u0440\u0443\u0433\u0430 (\u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 arc), \u0434\u043e \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u0438 \u043a\u0440\u0443\u0433\u0430 (\u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u044b\u0437\u043e\u0432). \u041a\u0430\u043a \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0443\u0442\u0435\u0439, \u043b\u0438\u043d\u0438\u044f \u0434\u0443\u0433\u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0430 \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u043c \u043f\u0443\u0442\u0438. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u043d\u0430\u0434\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c moveTo.<\/p>\n<p>  \u0420\u0438\u0441\u0443\u0435\u043c \u043a\u0440\u0443\u0433\u043e\u0432\u0443\u044e \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443<\/p>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0443 \u0432 \u041e\u041e\u041e \u00ab\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0445\u00bb, \u0438 \u0432\u0430\u0448\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u043c \u0437\u0430\u0434\u0430\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0440\u0443\u0433\u043e\u0432\u0443\u044e \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0451\u043d\u043d\u043e\u0441\u0442\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c \u043e\u043f\u0440\u043e\u0441\u0430.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f result \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b.<\/p>\n<pre><code class=\"javascript\">var results = [   {name: &quot;\u0423\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0451\u043d&quot;, count: 1043, color: &quot;lightblue&quot;},   {name: &quot;\u041d\u0435\u0439\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0435&quot;, count: 563, color: &quot;lightgreen&quot;},   {name: &quot;\u041d\u0435 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0451\u043d&quot;, count: 510, color: &quot;pink&quot;},   {name: &quot;\u0411\u0435\u0437 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432&quot;, count: 175, color: &quot;silver&quot;} ]; <\/code><\/pre>\n<p>  \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443, \u043c\u044b \u0440\u0438\u0441\u0443\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0430\u0440\u043a\u0438 \u0438 \u043f\u0430\u0440\u044b \u043b\u0438\u043d\u0438\u0439 \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430. \u0423\u0433\u043e\u043b \u043c\u044b \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c, \u0434\u0435\u043b\u044f \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u0440\u0443\u0433 (2\u03c0) \u043d\u0430 \u043e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u0437\u044b\u0432\u043e\u0432, \u0438 \u0443\u043c\u043d\u043e\u0436\u0430\u044f \u043d\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043b\u044e\u0434\u0435\u0439, \u0432\u044b\u0431\u0440\u0430\u0432\u0448\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043e\u0442\u0432\u0435\u0442\u0430.<\/p>\n<pre><code class=\"javascript\">&lt;canvas width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   var total = results.reduce(function(sum, choice) {     return sum + choice.count;   }, 0);   \/\/ Start at the top   var currentAngle = -0.5 * Math.PI;   results.forEach(function(result) {     var sliceAngle = (result.count \/ total) * 2 * Math.PI;     cx.beginPath();     \/\/ center=100,100, radius=100     \/\/ from current angle, clockwise by slice's angle     cx.arc(100, 100, 100,            currentAngle, currentAngle + sliceAngle);     currentAngle += sliceAngle;     cx.lineTo(100, 100);     cx.fillStyle = result.color;     cx.fill();   }); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041d\u043e \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u043d\u0435 \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u2013 \u044d\u0442\u043e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e. \u041d\u0430\u043c \u043d\u0430\u0434\u043e \u043a\u0430\u043a-\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 \u0442\u0435\u043a\u0441\u0442.<\/p>\n<h4>\u0422\u0435\u043a\u0441\u0442<\/h4>\n<p>  \u0423 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u0445\u043e\u043b\u0441\u0442\u0430 \u0435\u0441\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b fillText \u0438 strokeText. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043e\u0431\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0445 \u0431\u0443\u043a\u0432, \u043d\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f fillText. \u041e\u043d \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0446\u0432\u0435\u0442\u043e\u043c fillColor.<\/p>\n<pre><code class=\"javascript\">&lt;canvas&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   cx.font = &quot;28px Georgia&quot;;   cx.fillStyle = &quot;fuchsia&quot;;   cx.fillText(&quot;\u042f \u0438 \u0442\u0435\u043a\u0441\u0442 \u043c\u043e\u0433\u0443 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c!&quot;, 10, 50); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440, \u0441\u0442\u0438\u043b\u044c \u0438 \u0448\u0440\u0438\u0444\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e font. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u0448\u0440\u0438\u0444\u0442. \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u043a\u043b\u043e\u043d \u0438 \u0436\u0438\u0440\u043d\u043e\u0441\u0442\u044c \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438.<\/p>\n<p>  \u0414\u0432\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 fillText (\u0438 strokeText) \u0437\u0430\u0434\u0430\u044e\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u044e, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044d\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u043e \u043b\u0438\u043d\u0438\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u00ab\u0441\u0442\u043e\u044f\u0442\u00bb \u0431\u0443\u043a\u0432\u044b \u2013 \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u044f \u0441\u0432\u0438\u0441\u0430\u044e\u0449\u0438\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0431\u0443\u043a\u0432 \u0442\u0438\u043f\u0430 \u0440 \u0438 \u0443. \u041c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0437\u0430\u0434\u0430\u0432\u0430\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 textAlign \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u00abend\u00bb \u0438\u043b\u0438 \u00abcenter\u00bb, \u0430 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u2013 \u0437\u0430\u0434\u0430\u0432\u0430\u044f textBaseline \u00abtop\u00bb, \u00abmiddle\u00bb, \u0438\u043b\u0438 \u00abbottom\u00bb.<\/p>\n<p>  \u0412 \u043a\u043e\u043d\u0446\u0435 \u0433\u043b\u0430\u0432\u044b \u043c\u044b \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u043d\u0430\u0448\u0435\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435.<\/p>\n<h4>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h4>\n<p>  \u0412 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0439 \u0438 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439. \u041f\u0435\u0440\u0432\u0430\u044f \u2013 \u0442\u043e, \u0447\u0435\u043c \u043c\u044b \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u044c \u0432 \u044d\u0442\u043e\u0439 \u0433\u043b\u0430\u0432\u0435, \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0439 \u0444\u043e\u0440\u043c. \u0412\u0442\u043e\u0440\u0430\u044f \u2013 \u043d\u0435 \u0437\u0430\u0434\u0430\u0451\u0442 \u0444\u043e\u0440\u043c\u044b, \u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439.<\/p>\n<p>  \u041c\u0435\u0442\u043e\u0434 drawImage \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u0445\u043e\u043b\u0441\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u041e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u0437\u044f\u0442\u044b \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;img&gt;<\/code> \u0438\u043b\u0438 \u0441 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0445\u043e\u043b\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0438\u0434\u043d\u044b \u0432 \u0441\u0430\u043c\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;img&gt;<\/code> \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0432 \u043d\u0435\u0433\u043e \u0444\u0430\u0439\u043b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041d\u043e \u043e\u043d \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u0442\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0433 \u043d\u0435 \u0443\u0441\u043f\u0435\u0442\u044c \u0435\u0451 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u201cload\u201d \u0438 \u0440\u0438\u0441\u0443\u0435\u043c \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<pre><code class=\"javascript\">&lt;canvas&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   var img = document.createElement(&quot;img&quot;);   img.src = &quot;img\/hat.png&quot;;   img.addEventListener(&quot;load&quot;, function() {     for (var x = 10; x &lt; 200; x += 30)       cx.drawImage(img, x, 10);   }); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e drawImage \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430. \u0415\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0434\u0432\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b.<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 drawImage \u0437\u0430\u0434\u0430\u043d\u043e \u0434\u0435\u0432\u044f\u0442\u044c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0421\u043e \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u043e \u043f\u044f\u0442\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a (x, y, \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430) \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0434\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0421 \u0448\u0435\u0441\u0442\u043e\u0433\u043e \u043f\u043e \u0434\u0435\u0432\u044f\u0442\u044b\u0439 \u2013 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435, \u043a\u0443\u0434\u0430 \u0435\u0433\u043e \u043d\u0430\u0434\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>  \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 (\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438\u043b\u0438 \u043a\u0430\u0434\u0440\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438) \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0435 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u0438. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0435\u0441\u0442\u044c \u0443 \u043d\u0430\u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043e\u0437\u0430\u0445:<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/fe2\/a6e\/4e3\/fe2a6e4e31254a948ad8ef31f5c1dd41.png\"\/><\/p>\n<p>  \u041f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u044f \u043f\u043e\u0437\u044b, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0438\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430.<\/p>\n<p>  \u0414\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 clearRect. \u041e\u043d \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 fillRect, \u043d\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u043a\u0440\u0430\u0441\u043a\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u043e\u043d \u0434\u0435\u043b\u0430\u0435\u0442 \u0435\u0433\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c, \u0443\u0434\u0430\u043b\u044f\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438.<\/p>\n<p>  \u041c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 24 \u0438 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 30 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 \u0437\u0430\u0434\u0430\u0451\u0442 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043a\u0430\u0434\u0440\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">&lt;canvas&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   var img = document.createElement(&quot;img&quot;);   img.src = &quot;img\/player.png&quot;;   var spriteW = 24, spriteH = 30;   img.addEventListener(&quot;load&quot;, function() {     var cycle = 0;     setInterval(function() {       cx.clearRect(0, 0, spriteW, spriteH);       cx.drawImage(img,                    \/\/ source rectangle                    cycle * spriteW, 0, spriteW, spriteH,                    \/\/ destination rectangle                    0,               0, spriteW, spriteH);       cycle = (cycle + 1) % 8;     }, 120);   }); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f cycle \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440 \u043e\u043d\u0430 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043f\u043e \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044e 7 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0441\u043d\u0430\u0447\u0430\u043b\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441 \u043e\u0441\u0442\u0430\u0442\u043a\u043e\u043c. \u041e\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u0447\u0451\u0442\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b x, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043f\u0440\u0430\u0439\u0442 \u0441 \u043d\u0443\u0436\u043d\u043e\u0439 \u043f\u043e\u0437\u043e\u0439.<\/p>\n<h4>\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h4>\n<p>  \u0410 \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0430\u0434\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u0448\u0451\u043b \u0432\u043b\u0435\u0432\u043e, \u0430 \u043d\u0435 \u0432\u043f\u0440\u0430\u0432\u043e? \u041c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u043d\u0430\u0431\u043e\u0440 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432. \u041d\u043e \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0445\u043e\u043b\u0441\u0442\u0443, \u0447\u0442\u043e\u0431 \u043e\u043d \u0440\u0438\u0441\u043e\u0432\u0430\u043b \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0437\u0435\u0440\u043a\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>  \u0412\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 scale \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432\u0441\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0438\u0441\u0443\u043d\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u044b. \u041e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u2013 \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438.<\/p>\n<pre><code class=\"javascript\">&lt;canvas&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   cx.scale(3, .5);   cx.beginPath();   cx.arc(50, 50, 40, 0, 7);   cx.lineWidth = 3;   cx.stroke(); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442 \u0438\u043b\u0438 \u0441\u0436\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0443 \u043b\u0438\u043d\u0438\u0438 \u043f\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c. \u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043f\u0435\u0440\u0435\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0437\u0435\u0440\u043a\u0430\u043b\u044c\u043d\u043e. \u041f\u0435\u0440\u0435\u0432\u043e\u0440\u043e\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043e\u043a\u0440\u0443\u0433 \u0442\u043e\u0447\u043a\u0438 (0, 0), \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0442\u043e\u0436\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u041f\u0440\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430 -1, \u0444\u043e\u0440\u043c\u0430, \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 x = 100, \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430 \u0442\u0430\u043c, \u0433\u0434\u0435 \u0440\u0430\u043d\u044c\u0448\u0435 \u0431\u044b\u043b\u0430 \u043f\u043e\u0437\u0438\u0446\u0438\u044f -100.<\/p>\n<p>  \u0417\u043d\u0430\u0447\u0438\u0442, \u0434\u043b\u044f \u043e\u0442\u0437\u0435\u0440\u043a\u0430\u043b\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c cx.scale(-1, 1) \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0437\u043e\u0432\u043e\u043c drawImage \u2013 \u043d\u0430\u0448\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0443\u0435\u0434\u0435\u0442 \u0441 \u0445\u043e\u043b\u0441\u0442\u0430 \u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u043d\u0430. \u041c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u0432 drawImage, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u0435\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0441\u0434\u0432\u0438\u0433. \u0414\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u0434 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043f\u0440\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0441\u0438.<\/p>\n<p>  \u0415\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043a\u0440\u043e\u043c\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0432\u043b\u0438\u044f\u044e\u0449\u0438\u0445 \u043d\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0445\u043e\u043b\u0441\u0442\u0430. \u041d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u043e\u043c rotate \u0438 \u0441\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u043e\u043c translate. \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0447\u0442\u043e \u0432\u0441\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f, \u0442\u043e \u0435\u0441\u0442\u044c \u043a\u0430\u0436\u0434\u0430\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445.<\/p>\n<p>  \u0417\u043d\u0430\u0447\u0438\u0442, \u0435\u0441\u043b\u0438 \u043c\u044b \u0434\u0432\u0430\u0436\u0434\u044b \u0441\u0434\u0432\u0438\u043d\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 10 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0442\u043e \u0432\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043e \u043d\u0430 20 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043f\u0440\u0430\u0432\u0435\u0435. \u0415\u0441\u043b\u0438 \u043c\u044b \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0434\u0432\u0438\u043d\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u043e \u043e\u0442\u0441\u0447\u0451\u0442\u0430 \u043d\u0430 (50, 50), \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0432\u0435\u0440\u043d\u0451\u043c \u0432\u0441\u0451 \u043d\u0430 20 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432 (0.1\u03c0 \u0440\u0430\u0434\u0438\u0430\u043d), \u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442 \u0432\u043e\u043a\u0440\u0443\u0433 \u0442\u043e\u0447\u043a\u0438 (50, 50).<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/f60\/cf4\/24f\/f60cf424fb5f49ecb09c6d45c63562c9.PNG\"\/><\/p>\n<p>  \u0410 \u0435\u0441\u043b\u0438 \u043c\u044b \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0432\u0435\u0440\u043d\u0451\u043c \u0432\u0441\u0451 \u043d\u0430 20 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432, \u0430 \u0443\u0436\u0435 \u0437\u0430\u0442\u0435\u043c \u0441\u0434\u0432\u0438\u043d\u0435\u043c \u043d\u0430 (50, 50), \u0442\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0432 \u043f\u043e\u0432\u0451\u0440\u043d\u0443\u0442\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u0438\u043d\u043e\u043c\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443. \u041f\u043e\u0440\u044f\u0434\u043e\u043a \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u043e\u0442\u0437\u0435\u0440\u043a\u0430\u043b\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 x, \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"javascript\">function flipHorizontally(context, around) {   context.translate(around, 0);   context.scale(-1, 1);   context.translate(-around, 0); } <\/code><\/pre>\n<p>  \u041c\u044b \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043e\u0441\u044c Y \u0442\u0443\u0434\u0430, \u0433\u0434\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u0437\u0435\u0440\u043a\u0430\u043b\u043e, \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u043c \u043e\u0442\u0437\u0435\u0440\u043a\u0430\u043b\u0438\u0432\u0430\u043d\u0438\u0435, \u0438 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043e\u0441\u044c Y \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043d\u0430 \u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0449\u0435\u0435\u0441\u044f \u043c\u0435\u0441\u0442\u043e \u0432 \u0437\u0435\u0440\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0441\u0435\u043b\u0435\u043d\u043d\u043e\u0439. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0438\u0441\u0443\u043d\u043e\u043a \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/108\/1d8\/270\/1081d8270af44d0aa785013a78ab71c4.PNG\"\/><\/p>\n<p>  \u0422\u0443\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0434\u043e \u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u0437\u0435\u0440\u043a\u0430\u043b\u0438\u0432\u0430\u043d\u0438\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438. \u0415\u0441\u043b\u0438 \u043c\u044b \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u043c \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u043b\u0443\u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e Y, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 1. \u0412\u044b\u0437\u043e\u0432 flipHorizontally \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u0435\u0433\u043e \u0432\u043f\u0440\u0430\u0432\u043e, \u043d\u0430 \u043c\u0435\u0441\u0442\u043e \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 2. \u0417\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0438 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 3. \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043d\u0435 \u0442\u0430\u043c, \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u043e\u0442\u0437\u0435\u0440\u043a\u0430\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438. \u0412\u0442\u043e\u0440\u043e\u0439 \u0432\u044b\u0437\u043e\u0432 translate \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u0442\u043e \u2013 \u043e\u043d \u00ab\u043e\u0442\u043c\u0435\u043d\u044f\u0435\u0442\u00bb \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0434\u0432\u0438\u0433 \u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043d\u0430 \u043f\u043e\u0437\u0438\u0446\u0438\u044e 4.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0437\u0435\u0440\u043a\u0430\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 \u043d\u0430 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 (100, 0), \u043f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0443\u0432 \u043c\u0438\u0440 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430.<\/p>\n<pre><code class=\"javascript\">&lt;canvas&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   var img = document.createElement(&quot;img&quot;);   img.src = &quot;img\/player.png&quot;;   var spriteW = 24, spriteH = 30;   img.addEventListener(&quot;load&quot;, function() {     flipHorizontally(cx, 100 + spriteW \/ 2);     cx.drawImage(img, 0, 0, spriteW, spriteH,                  100, 0, spriteW, spriteH);   }); &lt;\/script&gt; <\/code><\/pre>\n<h4>\u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439<\/h4>\n<p>  \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u0412\u0441\u0451, \u0447\u0442\u043e \u043c\u044b \u0440\u0438\u0441\u0443\u0435\u043c \u043f\u043e\u0441\u043b\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0442\u0437\u0435\u0440\u043a\u0430\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430, \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0435\u0440\u043a\u0430\u043b\u044c\u043d\u044b\u043c. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439.<\/p>\n<p>  \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435, \u043f\u043e\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0442\u0430\u0440\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0422\u0430\u043a \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0434\u0435\u043b\u0430\u044e\u0449\u0430\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0442\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043a\u043e\u0434, \u0432\u044b\u0437\u0432\u0430\u0432\u0448\u0438\u0439 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u0417\u0430\u0442\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439, \u043f\u0440\u043e\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0445 \u043d\u0430 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442, \u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0435. \u0418 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u043d\u0430\u0447\u0430\u043b\u0443.<\/p>\n<p>  \u042d\u0442\u0438\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u044b save \u0438 restore \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u0445\u043e\u043b\u0441\u0442\u0430. \u041f\u043e \u0441\u0443\u0442\u0438, \u043e\u043d\u0438 \u0445\u0440\u0430\u043d\u044f\u0442 \u0441\u0442\u0435\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439. \u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 save \u0432 \u0441\u0442\u0435\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0430 \u043f\u0440\u0438 restore \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0432\u0435\u0440\u0445\u0443 \u0441\u0442\u0435\u043a\u0430 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u0441\u0435\u0445 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439.<\/p>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u044f branch \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0441\u0430\u043c\u0443 \u0441\u0435\u0431\u044f), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0438\u0441\u0443\u0435\u0442 \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0440\u0438\u0441\u0443\u044f \u043b\u0438\u043d\u0438\u044e, \u043f\u043e\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u044f \u0446\u0435\u043d\u0442\u0440 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043d\u0430 \u043a\u043e\u043d\u0435\u0446 \u043b\u0438\u043d\u0438\u0438, \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u044f \u0441\u0435\u0431\u044f \u0437\u0430\u0442\u0435\u043c \u0434\u0432\u0430\u0436\u0434\u044b \u2013 \u0441\u043d\u0430\u0447\u0430\u043b\u0430, \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0432 \u0432\u043b\u0435\u0432\u043e, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u043f\u0440\u0430\u0432\u043e. \u041a\u0430\u0436\u0434\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0434\u043b\u0438\u043d\u0443 \u0432\u0435\u0442\u0432\u0438, \u0438 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u044f \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0434\u043b\u0438\u043d\u0430 \u043f\u0430\u0434\u0430\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 8.<\/p>\n<pre><code class=\"javascript\">&lt;canvas width=&quot;600&quot; height=&quot;300&quot;&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   function branch(length, angle, scale) {     cx.fillRect(0, 0, 1, length);     if (length &lt; 8) return;     cx.save();     cx.translate(0, length);     cx.rotate(-angle);     branch(length * scale, angle, scale);     cx.rotate(2 * angle);     branch(length * scale, angle, scale);     cx.restore();   }   cx.translate(300, 0);   branch(60, 0.5, 0.8); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0431\u044b \u043d\u0435 \u0431\u044b\u043b\u043e \u0432\u044b\u0437\u043e\u0432\u043e\u0432 save \u0438 restore, \u0432\u0442\u043e\u0440\u043e\u0439 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 branch \u043d\u0430\u0447\u0438\u043d\u0430\u043b \u0431\u044b \u0441 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0438 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0435\u0440\u0432\u044b\u043c. \u041e\u043d \u0431\u044b\u043b \u0431\u044b \u0441\u043e\u0435\u0434\u0438\u043d\u0451\u043d \u043d\u0435 \u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u0435\u0442\u043a\u043e\u0439, \u0430 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u043f\u0440\u0430\u0432\u043e\u0439 \u0432\u0435\u0442\u043a\u043e\u0439, \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043f\u0435\u0440\u0432\u044b\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u0436\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430, \u043d\u043e \u0443\u0436\u0435 \u043d\u0435 \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u0430\u044f.<\/p>\n<h4>\u041d\u0430\u0437\u0430\u0434 \u043a \u0438\u0433\u0440\u0435<\/h4>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0437\u043d\u0430\u0435\u043c \u043e \u0445\u043e\u043b\u0441\u0442\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0434\u043b\u044f \u0438\u0433\u0440\u044b \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u044b. \u041d\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0438. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c drawImage \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0433\u0440\u044b.<\/p>\n<p>  \u041c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0442\u0438\u043f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 CanvasDisplay, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0442\u043e\u0442 \u0436\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0447\u0442\u043e \u0438 DOMDisplay \u0438\u0437 \u0433\u043b\u0430\u0432\u044b 15, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e, \u043c\u0435\u0442\u043e\u0434\u044b drawFrame and clear.<\/p>\n<p>  \u041e\u0431\u044a\u0435\u043a\u0442 \u0445\u0440\u0430\u043d\u0438\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0447\u0435\u043c DOMDisplay. \u0412\u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 DOM, \u043e\u043d \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u043a\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442, \u043a\u0430\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0443\u0440\u043e\u0432\u043d\u044f \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u0438\u0434\u0438\u043c. \u0422\u0430\u043a\u0436\u0435 \u043e\u043d \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u044d\u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u043a\u0430\u0434\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c. \u0418 \u0435\u0449\u0451 \u043e\u043d \u0445\u0440\u0430\u043d\u0438\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e flipPlayer, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u0436\u0435 \u043a\u043e\u0433\u0434\u0430 \u0438\u0433\u0440\u043e\u043a \u0441\u0442\u043e\u044f\u043b \u043d\u0430 \u043c\u0435\u0441\u0442\u0435, \u043e\u043d \u0431\u044b\u043b \u043f\u043e\u0432\u0451\u0440\u043d\u0443\u0442 \u0432 \u0442\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0448\u0451\u043b \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0430\u0437.<\/p>\n<pre><code class=\"javascript\">function CanvasDisplay(parent, level) {   this.canvas = document.createElement(&quot;canvas&quot;);   this.canvas.width = Math.min(600, level.width * scale);   this.canvas.height = Math.min(450, level.height * scale);   parent.appendChild(this.canvas);   this.cx = this.canvas.getContext(&quot;2d&quot;);    this.level = level;   this.animationTime = 0;   this.flipPlayer = false;    this.viewport = {     left: 0,     top: 0,     width: this.canvas.width \/ scale,     height: this.canvas.height \/ scale   };    this.drawFrame(0); }  CanvasDisplay.prototype.clear = function() {   this.canvas.parentNode.removeChild(this.canvas); }; <\/code><\/pre>\n<p>  \u0412 15 \u0433\u043b\u0430\u0432\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0430\u0433\u0430 \u0432 drawFrame \u0438\u0437-\u0437\u0430 \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0430 animationTime, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e DOMDisplay \u0435\u0433\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b. \u041d\u0430\u0448\u0430 \u043d\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f drawFrame \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0435\u0433\u043e \u0434\u043b\u044f \u043e\u0442\u0441\u0447\u0451\u0442\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043a\u0430\u0434\u0440\u0430\u043c\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<pre><code class=\"javascript\">CanvasDisplay.prototype.drawFrame = function(step) {   this.animationTime += step;    this.updateViewport();   this.clearDisplay();   this.drawBackground();   this.drawActors(); }; <\/code><\/pre>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043e\u043a\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0438\u0433\u0440\u043e\u043a\u0430, \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0445\u043e\u043b\u0441\u0442 \u0446\u0432\u0435\u0442\u043e\u043c \u0444\u043e\u043d\u0430, \u0438 \u0440\u0438\u0441\u0443\u0435\u0442 \u0444\u043e\u043d \u0438 \u0430\u043a\u0442\u0451\u0440\u043e\u0432. \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u0441\u0451 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435 \u0442\u0430\u043a, \u043a\u0430\u043a \u0432 \u0433\u043b\u0430\u0432\u0435 15, \u0433\u0434\u0435 \u043c\u044b \u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0438 \u0444\u043e\u043d \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u043b\u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 DOM \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043f\u043e \u043d\u0435\u043c\u0443.<\/p>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 \u2013 \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u0438, \u043f\u043e\u0441\u043b\u0435 \u0438\u0445 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438\u0445 \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u044c (\u0438\u043b\u0438 \u0443\u0431\u0440\u0430\u0442\u044c). \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0445\u043e\u043b\u0441\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0446\u0435\u043d\u0443.<\/p>\n<p>  \u041c\u0435\u0442\u043e\u0434 updateViewport \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u043c\u0435\u0442\u043e\u0434 scrollPlayerIntoView \u0438\u0437 DOMDisplay. \u041e\u043d \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043b\u0438\u0437\u043a\u043e \u043a \u043a\u0440\u0430\u044e \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u043e\u043a\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0441\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f.<\/p>\n<pre><code class=\"javascript\">CanvasDisplay.prototype.updateViewport = function() {   var view = this.viewport, margin = view.width \/ 3;   var player = this.level.player;   var center = player.pos.plus(player.size.times(0.5));    if (center.x &lt; view.left + margin)     view.left = Math.max(center.x - margin, 0);   else if (center.x &gt; view.left + view.width - margin)     view.left = Math.min(center.x + margin - view.width,                          this.level.width - view.width);   if (center.y &lt; view.top + margin)     view.top = Math.max(center.y - margin, 0);   else if (center.y &gt; view.top + view.height - margin)     view.top = Math.min(center.y + margin - view.height,                         this.level.height - view.height); }; <\/code><\/pre>\n<p>  \u0412\u044b\u0437\u043e\u0432\u044b Math.max \u0438 Math.min \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u044e\u0442, \u0447\u0442\u043e \u043e\u043a\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0443\u0440\u043e\u0432\u043d\u044f. Math.max(x, 0) \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043d\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u043d\u0443\u043b\u044f. \u0421\u0445\u043e\u0434\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c Math.min \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u0440\u0435\u0432\u044b\u0441\u0438\u0442 \u0437\u0430\u0434\u0430\u043d\u043d\u0443\u044e \u0433\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>  \u041f\u0440\u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0435 \u0434\u0438\u0441\u043f\u043b\u0435\u044f \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u0440\u0443\u0433\u043e\u0439 \u0446\u0432\u0435\u0442, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0432\u044b\u0438\u0433\u0440\u0430\u043d\u0430 \u0438\u0433\u0440\u0430 \u0438\u043b\u0438 \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u043d\u0430.<\/p>\n<pre><code class=\"javascript\">CanvasDisplay.prototype.clearDisplay = function() {   if (this.level.status == &quot;won&quot;)     this.cx.fillStyle = &quot;rgb(68, 191, 255)&quot;;   else if (this.level.status == &quot;lost&quot;)     this.cx.fillStyle = &quot;rgb(44, 136, 214)&quot;;   else     this.cx.fillStyle = &quot;rgb(52, 166, 251)&quot;;   this.cx.fillRect(0, 0,                    this.canvas.width, this.canvas.height); }; <\/code><\/pre>\n<p>  \u0414\u043b \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u043e\u043d\u0430 \u043c\u044b \u043f\u0440\u043e\u0431\u0435\u0433\u0430\u0435\u043c\u0441\u044f \u043f\u043e \u043a\u043b\u0435\u0442\u043a\u0430\u043c, \u0432\u0438\u0434\u0438\u043c\u044b\u043c \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043e\u043a\u043d\u0435 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0442\u043e\u0442 \u0436\u0435 \u0444\u043e\u043a\u0443\u0441, \u0447\u0442\u043e \u0438 \u0432 obstacleAt \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435.<\/p>\n<pre><code class=\"javascript\">var otherSprites = document.createElement(&quot;img&quot;); otherSprites.src = &quot;img\/sprites.png&quot;;  CanvasDisplay.prototype.drawBackground = function() {   var view = this.viewport;   var xStart = Math.floor(view.left);   var xEnd = Math.ceil(view.left + view.width);   var yStart = Math.floor(view.top);   var yEnd = Math.ceil(view.top + view.height);    for (var y = yStart; y &lt; yEnd; y++) {     for (var x = xStart; x &lt; xEnd; x++) {       var tile = this.level.grid[y][x];       if (tile == null) continue;       var screenX = (x - view.left) * scale;       var screenY = (y - view.top) * scale;       var tileX = tile == &quot;lava&quot; ? scale : 0;       this.cx.drawImage(otherSprites,                         tileX,         0, scale, scale,                         screenX, screenY, scale, scale);     }   } }; <\/code><\/pre>\n<p>  \u041d\u0435\u043f\u0443\u0441\u0442\u044b\u0435 \u043a\u043b\u0435\u0442\u043a\u0438 (null) \u0440\u0438\u0441\u0443\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 drawImage. \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 otherSprites \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0445\u0441\u044f \u043a \u0438\u0433\u0440\u043e\u043a\u0443. \u0421\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e \u2014 \u044d\u0442\u043e \u0441\u0442\u0435\u043d\u0430, \u043b\u0430\u0432\u0430 \u0438 \u043c\u043e\u043d\u0435\u0442\u043a\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/51a\/b93\/4ba\/51ab934babe843589a94d048a57e347a.png\"\/><\/p>\n<h4>\u0421\u043f\u0440\u0430\u0439\u0442\u044b \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u044b<\/h4>\n<p>  \u041a\u043b\u0435\u0442\u043a\u0438 \u0444\u043e\u043d\u0430 20\u044520 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0442\u0443 \u0436\u0435 \u0448\u043a\u0430\u043b\u0443, \u0447\u0442\u043e \u0431\u044b\u043b\u0430 \u0432 DOMDisplay. \u0417\u043d\u0430\u0447\u0438\u0442, \u0441\u0434\u0432\u0438\u0433 \u043a\u043b\u0435\u0442\u043e\u043a \u043b\u0430\u0432\u044b 20 (\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 scale), \u0430 \u0441\u0434\u0432\u0438\u0433 \u0441\u0442\u0435\u043d 0.<\/p>\n<p>  \u041c\u044b \u043d\u0435 \u0436\u0434\u0451\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u0430. \u0412\u044b\u0437\u043e\u0432 drawImage \u0441 \u043d\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0439 \u043f\u043e\u043a\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u043e\u0439 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0435\u0440\u0432\u044b\u0445 \u043a\u0430\u0434\u0440\u0430\u0445 \u0438\u0433\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430 \u043d\u0435\u0432\u0435\u0440\u043d\u043e, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e. \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u044d\u043a\u0440\u0430\u043d, \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0430\u044f \u0441\u0446\u0435\u043d\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<p>  \u041d\u0430\u0448 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u0433\u0440\u043e\u043a\u0430. \u041a\u043e\u0434 \u0435\u0433\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442 \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0435\u0435 \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430. \u041f\u0435\u0440\u0432\u044b\u0435 \u0432\u043e\u0441\u0435\u043c\u044c \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0445\u043e\u0434\u044c\u0431\u044b. \u041a\u043e\u0433\u0434\u0430 \u0438\u0433\u0440\u043e\u043a \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u043f\u043e\u043b\u0443, \u043c\u044b \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0445 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 animationTime \u043e\u0431\u044a\u0435\u043a\u0442\u0430 display. \u041e\u043d\u043e \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445, \u0430 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u0430\u0434\u0440\u044b 12 \u0440\u0430\u0437 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0443\u043c\u043d\u043e\u0436\u0430\u0435\u043c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 12. \u041a\u043e\u0433\u0434\u0430 \u0438\u0433\u0440\u043e\u043a \u0441\u0442\u043e\u0438\u0442, \u043c\u044b \u0440\u0438\u0441\u0443\u0435\u043c \u0434\u0435\u0432\u044f\u0442\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442. \u0412 \u043f\u0440\u044b\u0436\u043a\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0451\u043c \u043f\u043e \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u0430 \u043e\u0442 \u043d\u0443\u043b\u044f, \u043c\u044b \u0440\u0438\u0441\u0443\u0435\u043c \u0434\u0435\u0441\u044f\u0442\u044b\u0439, \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0430\u0432\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442.<\/p>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0447\u0443\u0442\u044c \u0448\u0438\u0440\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 \u2013 24 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u0432\u043c\u0435\u0441\u0442\u043e 16, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u0440\u0443\u043a \u0438 \u043d\u043e\u0433, \u043c\u0435\u0442\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 x \u0438 \u0448\u0438\u0440\u0438\u043d\u0443 \u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e (playerXOverlap).<\/p>\n<pre><code class=\"javascript\">var playerSprites = document.createElement(&quot;img&quot;); playerSprites.src = &quot;img\/player.png&quot;; var playerXOverlap = 4;  CanvasDisplay.prototype.drawPlayer = function(x, y, width,                                               height) {   var sprite = 8, player = this.level.player;   width += playerXOverlap * 2;   x -= playerXOverlap;   if (player.speed.x != 0)     this.flipPlayer = player.speed.x &lt; 0;    if (player.speed.y != 0)     sprite = 9;   else if (player.speed.x != 0)     sprite = Math.floor(this.animationTime * 12) % 8;    this.cx.save();   if (this.flipPlayer)     flipHorizontally(this.cx, x + width \/ 2);    this.cx.drawImage(playerSprites,                     sprite * width, 0, width, height,                     x,              y, width, height);    this.cx.restore(); }; <\/code><\/pre>\n<p>  \u041c\u0435\u0442\u043e\u0434 drawPlayer \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 drawActors, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0438\u0441\u0443\u0435\u0442 \u0432\u0441\u0435\u0445 \u0430\u043a\u0442\u0451\u0440\u043e\u0432 \u0432 \u0438\u0433\u0440\u0435.<\/p>\n<pre><code class=\"javascript\">CanvasDisplay.prototype.drawActors = function() {   this.level.actors.forEach(function(actor) {     var width = actor.size.x * scale;     var height = actor.size.y * scale;     var x = (actor.pos.x - this.viewport.left) * scale;     var y = (actor.pos.y - this.viewport.top) * scale;     if (actor.type == &quot;player&quot;) {       this.drawPlayer(x, y, width, height);     } else {       var tileX = (actor.type == &quot;coin&quot; ? 2 : 1) * scale;       this.cx.drawImage(otherSprites,                         tileX, 0, width, height,                         x,     y, width, height);     }   }, this); }; <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0435 \u0447\u0435\u0433\u043e-\u043b\u0438\u0431\u043e \u043a\u0440\u043e\u043c\u0435 \u0438\u0433\u0440\u043e\u043a\u0430 \u043c\u044b \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0435\u0433\u043e \u0442\u0438\u043f, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0441\u043f\u0440\u0430\u0439\u0442\u0430. \u041b\u0430\u0432\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044e 20, \u043c\u043e\u043d\u0435\u0442\u0430 \u2013 40.<\/p>\n<p>  \u041d\u0443\u0436\u043d\u043e \u0432\u044b\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043e\u043a\u043d\u0430 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043f\u0440\u0438 \u043f\u043e\u0434\u0441\u0447\u0451\u0442\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0430\u043a\u0442\u0451\u0440\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u043e\u0447\u043a\u0430 (0, 0) \u043d\u0430\u0448\u0435\u0433\u043e \u0445\u043e\u043b\u0441\u0442\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043b\u0435\u0432\u043e\u0439 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0442\u043e\u0447\u043a\u0435 \u043e\u043a\u043d\u0430 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u0430 \u043d\u0435 \u043b\u0435\u0432\u043e\u0439 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0442\u043e\u0447\u043a\u0435 \u0443\u0440\u043e\u0432\u043d\u044f. \u0415\u0449\u0451 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u0438 translate.<\/p>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 display \u0432 runGame:<\/p>\n<pre><code class=\"html\">&lt;body&gt;   &lt;script&gt;     runGame(GAME_LEVELS, CanvasDisplay);   &lt;\/script&gt; &lt;\/body&gt; <\/code><\/pre>\n<h4>\u0412\u044b\u0431\u043e\u0440 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/h4>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u044b\u0431\u043e\u0440 \u2013 HTML, SVG \u0438 \u0445\u043e\u043b\u0441\u0442. \u041d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b.<\/p>\n<p>  \u0427\u0438\u0441\u0442\u044b\u0439 HTML \u043f\u0440\u043e\u0441\u0442. \u041e\u043d \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u0435\u0442\u0441\u044f \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c. SVG \u0438 \u0445\u043e\u043b\u0441\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u043d\u043e \u043d\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0432 \u0435\u0433\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438 \u043d\u0435 \u0434\u0435\u043b\u0430\u044e\u0442 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u043e\u0434\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438. \u0412 HTML \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0431\u043b\u043e\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<p>  SVG \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0447\u0451\u0442\u043a\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0438. \u041e\u043d \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e HTML, \u043d\u043e \u0438 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043c\u043e\u0449\u043d\u0435\u0435.<\/p>\n<p>  SVG \u0438 HTML \u0441\u0442\u0440\u043e\u044f\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 (DOM), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d\u0438 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0430\u0434\u043e \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u043b\u0438 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0437\u0430\u0442\u0440\u0430\u0442\u043d\u043e. DOM \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043c\u044b\u0448\u0438 \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 (\u0434\u0430\u0436\u0435 \u043d\u0430 \u0444\u043e\u0440\u043c\u0430\u0445, \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0447\u0435\u0440\u0435\u0437 SVG). \u0421 \u0445\u043e\u043b\u0441\u0442\u043e\u043c \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0439\u0434\u0451\u0442.<\/p>\n<p>  \u041d\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0445\u043e\u043b\u0441\u0442\u0430 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041e\u043d \u043d\u0435 \u0441\u0442\u0440\u043e\u0438\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0430\u043d\u043d\u044b\u0445, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0438\u0441\u0443\u0435\u0442 \u043d\u0430 \u0442\u043e\u0439 \u0436\u0435 \u0441\u0430\u043c\u043e\u0439 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u0438, \u0447\u0442\u043e \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u0437\u0430\u0442\u0440\u0430\u0442\u043d\u043e\u0441\u0442\u044c \u0432 \u043f\u0435\u0440\u0435\u0441\u0447\u0451\u0442\u0435 \u043d\u0430 \u0444\u043e\u0440\u043c\u044b.<\/p>\n<p>  \u0415\u0441\u0442\u044c \u0435\u0449\u0451 \u0444\u0430\u043a\u0442\u043e\u0440\u044b, \u0442\u0438\u043f\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0446\u0435\u043d\u044b \u043f\u043e\u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u043e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u0440\u0430\u0441\u0441\u0438\u0440\u043e\u0432\u043a\u0438 \u043b\u0443\u0447\u0435\u0439) \u0438\u043b\u0438 \u043f\u043e\u0441\u0442\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 JavaScript (\u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435 \u0438\u043b\u0438 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u0435), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u043e\u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0442\u0435\u0445\u043d\u0438\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0444 \u0447\u0435\u0440\u0435\u0437 SVG \u0438\u043b\u0438 \u0445\u043e\u043b\u0441\u0442, \u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b HTML \u043f\u043e\u0432\u0435\u0440\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0435\u043f\u0440\u0438\u0432\u0435\u0440\u0435\u0434\u043b\u0438\u0432\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0435\u0432\u0430\u0436\u043d\u043e, \u043a\u0430\u043a\u043e\u0439 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u0414\u0438\u0441\u043f\u043b\u0435\u0439, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u043c\u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u044b, \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u043c \u0438\u0437 \u0442\u0440\u0451\u0445 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u043d\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0442\u0435\u043a\u0441\u0442 \u0438 \u043d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043c\u044b\u0448\u0438, \u0438 \u043d\u0435 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<h4>\u0418\u0442\u043e\u0433<\/h4>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0433\u043b\u0430\u0432\u0435 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0441\u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0432\u0448\u0438\u0441\u044c \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <code>&lt;canvas&gt;<\/code>.<\/p>\n<p>  \u0423\u0437\u0435\u043b \u0445\u043e\u043b\u0441\u0442\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0433\u0434\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043c\u043e\u0436\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u044a\u0435\u043a\u0442 context, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 \u043c\u0435\u0442\u043e\u0434\u043e\u043c getContext. \u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0438 \u043e\u0431\u0432\u043e\u0434\u0438\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e fillStyle \u0437\u0430\u0434\u0430\u0451\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0443 \u0444\u043e\u0440\u043c. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 strokeStyle \u0438 lineWidth \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0442\u0435\u043c, \u043a\u0430\u043a \u0440\u0438\u0441\u0443\u044e\u0442\u0441\u044f \u043b\u0438\u043d\u0438\u0438.<\/p>\n<p>  \u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u0438 \u043a\u0443\u0441\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0438\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0430. \u041c\u0435\u0442\u043e\u0434\u044b fillRect \u0438 strokeRect \u0440\u0438\u0441\u0443\u044e\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u0430 fillText \u0438 strokeText \u0432\u044b\u0432\u043e\u0434\u044f\u0442 \u0442\u0435\u043a\u0441\u0442. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0445 \u0444\u043e\u0440\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0443\u0442\u0438.<\/p>\n<p>  \u0412\u044b\u0437\u043e\u0432 beginPath \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0443\u0442\u044c. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u043b\u0438\u043d\u0438\u0438 \u0438 \u043a\u0440\u0438\u0432\u044b\u0435 \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u043f\u0443\u0442\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, lineTo \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u044f\u043c\u0443\u044e. \u041a\u043e\u0433\u0434\u0430 \u043f\u0443\u0442\u044c \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d, \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u043e\u043c fill \u0438\u043b\u0438 \u043e\u0431\u0432\u0435\u0441\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u043c stroke.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0445\u043e\u043b\u0441\u0442\u0430 \u043d\u0430 \u043d\u0430\u0448 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u043c drawImage. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043e\u043d \u0440\u0438\u0441\u0443\u0435\u0442 \u0432\u0441\u044e \u0438\u0441\u0445\u043e\u0434\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u043d\u043e \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u0443\u0447\u0430\u0441\u0442\u043e\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0412 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u044d\u0442\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u043f\u0438\u0440\u0443\u044f \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043e\u0437\u044b \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 \u0438\u0437 \u0447\u0430\u0441\u0442\u0435\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0432\u0448\u0435\u0439 \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0437.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443, \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443. \u0414\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0445\u0440\u0430\u043d\u0438\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434\u044b translate, scale \u0438 rotate. \u042d\u0442\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f. \u0422\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u043e\u043c save \u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u043e\u043c restore.<\/p>\n<p>  \u041f\u0440\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 clearRect \u0434\u043b\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u0447\u0430\u0441\u0442\u0435\u0439 \u0445\u043e\u043b\u0441\u0442\u0430 \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439.<\/p>\n<h4>\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f<\/h4>\n<p>  <\/p>\n<h5>\u0424\u043e\u0440\u043c\u044b<\/h5>\n<p>  \u041d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443, \u0440\u0438\u0441\u0443\u044e\u0449\u0443\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b:<\/p>\n<p>  1. \u0442\u0440\u0430\u043f\u0435\u0446\u0438\u044e<br \/>  2. \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0440\u043e\u043c\u0431<br \/>  3. \u0437\u0438\u0433\u0437\u0430\u0433<br \/>  4. \u0441\u043f\u0438\u0440\u0430\u043b\u044c \u0438\u0437 100 \u043e\u0442\u0440\u0435\u0437\u043a\u043e\u0432<br \/>  5. \u0436\u0451\u043b\u0442\u0443\u044e \u0437\u0432\u0435\u0437\u0434\u0443<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/690\/cd6\/63b\/690cd663bc5847df8e4fa7329a12e189.PNG\"\/><\/p>\n<p>  \u0420\u0438\u0441\u0443\u044f \u0434\u0432\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445, \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u0439\u0442\u0435\u0441\u044c \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 Math.cos \u0438 Math.sin \u0438\u0437 \u0433\u043b\u0430\u0432\u044b 13, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043d\u0430 \u043a\u0440\u0443\u0433\u0435 \u0441 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c.<\/p>\n<p>  \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u041f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0442\u0438\u043f\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043e\u0447\u0435\u043a. \u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u0441\u043e \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u0434 \u043e\u0431\u044b\u0447\u043d\u043e \u0442\u0440\u0443\u0434\u043d\u0435\u0435 \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c.<\/p>\n<pre><code class=\"javascript\">&lt;canvas width=&quot;600&quot; height=&quot;200&quot;&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);    \/\/ \u0412\u0430\u0448 \u043a\u043e\u0434 &lt;\/script&gt; <\/code><\/pre>\n<h5>\u041a\u0440\u0443\u0433\u043e\u0432\u0430\u044f \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430<\/h5>\n<p>  \u0420\u0430\u043d\u0435\u0435 \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0440\u0443\u0433\u043e\u0432\u043e\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b. \u041f\u043e\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0435\u0451, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0431\u044b\u043b\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0440\u044f\u0434\u043e\u043c \u0441 \u043a\u0443\u0441\u043a\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0451 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043e\u0442\u044b\u0441\u043a\u0430\u0442\u044c \u0441\u0438\u043c\u043f\u0430\u0442\u0438\u0447\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \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 \u0442\u0435\u043a\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u043d\u0430\u0431\u043e\u0440\u0430\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0435\u0442 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u043c\u0435\u043d\u044c\u0448\u0435 5% (\u0447\u0442\u043e\u0431\u044b \u0442\u0435\u043a\u0441\u0442 \u043d\u0435 \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u0438\u043b\u0441\u044f \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430).<\/p>\n<p>  \u0412\u0430\u043c \u0441\u043d\u043e\u0432\u0430 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f Math.sin \u0438 Math.cos.<\/p>\n<pre><code class=\"javascript\">&lt;canvas width=&quot;600&quot; height=&quot;300&quot;&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);   var total = results.reduce(function(sum, choice) {     return sum + choice.count;   }, 0);    var currentAngle = -0.5 * Math.PI;   var centerX = 300, centerY = 150;   \/\/ \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043a\u043e\u0434 \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u043c\u0435\u0442\u043e\u043a   results.forEach(function(result) {     var sliceAngle = (result.count \/ total) * 2 * Math.PI;     cx.beginPath();     cx.arc(centerX, centerY, 100,            currentAngle, currentAngle + sliceAngle);     currentAngle += sliceAngle;     cx.lineTo(centerX, centerY);     cx.fillStyle = result.color;     cx.fill();   }); &lt;\/script&gt; <\/code><\/pre>\n<h5>\u041f\u0440\u044b\u0433\u0430\u044e\u0449\u0438\u0439 \u043c\u044f\u0447\u0438\u043a<\/h5>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0442\u0435\u0445\u043d\u0438\u043a\u0443 requestAnimationFrame \u0438\u0437 \u0433\u043b\u0430\u0432 13 \u0438 15 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0441 \u043f\u0440\u044b\u0433\u0430\u044e\u0449\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u044f\u0447\u043e\u043c. \u041c\u044f\u0447 \u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0438 \u043e\u0442\u0441\u043a\u0430\u043a\u0438\u0432\u0430\u0435\u0442 \u043e\u0442 \u0441\u0442\u043e\u0440\u043e\u043d \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u043f\u0440\u0438 \u0441\u043e\u0443\u0434\u0430\u0440\u0435\u043d\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">&lt;canvas width=&quot;400&quot; height=&quot;400&quot;&gt;&lt;\/canvas&gt; &lt;script&gt;   var cx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);    var lastTime = null;   function frame(time) {     if (lastTime != null)       updateAnimation(Math.min(100, time - lastTime) \/ 1000);     lastTime = time;     requestAnimationFrame(frame);   }   requestAnimationFrame(frame);    function updateAnimation(step) {     \/\/ \u0412\u0430\u0448 \u043a\u043e\u0434   } &lt;\/script&gt; <\/code><\/pre>\n<h5>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u043e\u0435 \u043e\u0442\u0437\u0435\u0440\u043a\u0430\u043b\u0438\u0432\u0430\u043d\u0438\u0435<\/h5>\n<p>  \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u044e\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0414\u043b\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u044d\u0444\u0444\u0435\u043a\u0442 \u043d\u0435 \u0442\u0430\u043a \u0437\u0430\u043c\u0435\u0442\u0435\u043d, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f\u043c \u043f\u043e\u0434\u0432\u0435\u0440\u0433\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0447\u0435\u043a, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e. \u0414\u043b\u044f \u0440\u0430\u0441\u0442\u0440\u0430 \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0430, \u0438 \u0445\u043e\u0442\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0431\u0443\u0434\u0443\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u043e-\u0443\u043c\u043d\u043e\u043c\u0443, \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043d\u0435\u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u0440\u0430\u0441\u0442\u0440\u0430.<\/p>\n<p>  \u0412 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u0435, \u0433\u0434\u0435 \u0435\u0441\u0442\u044c \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u0438\u043d \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442, \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0430\u0434\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0442\u043d\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u0438\u043b\u0438 \u0442\u044b\u0441\u044f\u0447\u0438 \u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0447\u0430\u0441\u0442\u0438\u0446 \u043e\u0442 \u0432\u0437\u0440\u044b\u0432\u0430.<\/p>\n<p>  \u041f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 \u0431\u0435\u0437 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043e\u043a \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0431\u0435\u0437 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0445 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 drawImage.   \t<\/p>\n<div class=\"clear\"><\/div>\n<\/p><\/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\/244545\/\"> http:\/\/habrahabr.ru\/post\/244545\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">\n<h4>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h4>\n<p>  <\/p>\n<ul>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/240219\/\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/240223\/\">\u0412\u0435\u043b\u0438\u0447\u0438\u043d\u044b, \u0442\u0438\u043f\u044b \u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/240225\/\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/240349\/\">\u0424\u0443\u043d\u043a\u0446\u0438\u0438<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/240813\/\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445: \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u044b<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/241155\/\">\u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/241587\/\">\u0422\u0430\u0439\u043d\u0430\u044f \u0436\u0438\u0437\u043d\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/241776\/\">\u041f\u0440\u043e\u0435\u043a\u0442: \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u0436\u0438\u0437\u043d\u044c<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/242609\/\">\u041f\u043e\u0438\u0441\u043a \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/242695\/\">\u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/243273\/\">\u041c\u043e\u0434\u0443\u043b\u0438<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/243277\/\">\u041f\u0440\u043e\u0435\u043a\u0442: \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/243311\/\">JavaScript \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/243815\/\">Document Object Model<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/244041\/\">\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/244405\/\">\u041f\u0440\u043e\u0435\u043a\u0442: \u0438\u0433\u0440\u0430-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440<\/a><\/li>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/244545\/\">\u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435<\/a><\/li>\n<li>HTTP<\/li>\n<li>\u0424\u043e\u0440\u043c\u044b \u0438 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430<\/li>\n<li>\u041f\u0440\u043e\u0435\u043a\u0442: Paint<\/li>\n<li>Node.js<\/li>\n<li>\u041f\u0440\u043e\u0435\u043a\u0442: \u0432\u0435\u0431-\u0441\u0430\u0439\u0442 \u043f\u043e \u043e\u0431\u043c\u0435\u043d\u0443 \u0443\u043c\u0435\u043d\u0438\u044f\u043c\u0438<\/li>\n<li><a href=\"http:\/\/eloquentjavascript.net\/code\">\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u0434\u043b\u044f \u043a\u043e\u0434\u0430<\/a><\/li>\n<\/ul>\n<p>  <i>\u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u043e\u0431\u043c\u0430\u043d.<br \/>  \u041c.\u041a.\u042d\u0448\u0435\u0440<\/i><\/p>\n<p>  \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u041f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0441\u0446\u0432\u0435\u0442\u043a\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 DOM. \u0422\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043c\u043d\u043e\u0433\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0433\u0440\u044b \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u044b. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0443\u0437\u043b\u0430\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0434\u0430\u0442\u044c \u0438\u043c \u043b\u044e\u0431\u043e\u0439 \u043d\u0443\u0436\u043d\u044b\u0439 \u0432\u0438\u0434. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0438\u0441\u043a\u0430\u0436\u0430\u0442\u044c \u0443\u0437\u043b\u044b \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0438\u043b\u044c transform.<\/p>\n<p>  \u041d\u043e \u0442\u0430\u043a\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 DOM \u2013 \u043d\u0435 \u0442\u043e, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0442\u0438\u043f\u0430 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438, \u043a\u0440\u0430\u0439\u043d\u0435 \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 HTML.<\/p>\n<p>  \u0415\u0441\u0442\u044c \u0434\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b. \u041f\u0435\u0440\u0432\u0430\u044f \u2013 SVG, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430, \u0442\u0430\u043a\u0436\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 DOM, \u043d\u043e \u0431\u0435\u0437 \u0443\u0447\u0430\u0441\u0442\u0438\u044f HTML. SVG \u2013 \u0434\u0438\u0430\u043b\u0435\u043a\u0442 \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0444\u043e\u0440\u043c\u0430\u0445, \u0430 \u043d\u0435 \u0442\u0435\u043a\u0441\u0442\u0435. SVG \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432 HTML, \u0438\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0442\u0435\u0433 <code>&lt;img&gt;<\/code>.<\/p>\n<p>  \u0412\u0442\u043e\u0440\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u2013 \u0445\u043e\u043b\u0441\u0442 (canvas). \u0425\u043e\u043b\u0441\u0442 \u2013 \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 DOM, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430. \u041e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 API \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u043e\u0440\u043c \u043d\u0430 \u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u0445\u043e\u043b\u0441\u0442\u043e\u043c \u0438 SVG \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 SVG \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0444\u043e\u0440\u043c \u2013 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0438\u043b\u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440. \u0425\u043e\u043b\u0441\u0442 \u0436\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0444\u043e\u0440\u043c\u044b \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 (\u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0440\u0430\u0441\u0442\u0440\u0430), \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u0442 \u0438\u0445, \u0438 \u043d\u0435 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u044d\u0442\u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u0444\u043e\u0440\u043c\u0430 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0445\u043e\u043b\u0441\u0442 (\u0438\u043b\u0438 \u0442\u0443 \u0447\u0430\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043a\u0440\u0443\u0436\u0430\u0435\u0442 \u0444\u043e\u0440\u043c\u0443) \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0435\u0451 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u043c\u0435\u0441\u0442\u0435.  <\/p>\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-244545","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/244545","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=244545"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/244545\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=244545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=244545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=244545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}