{"id":254982,"date":"2015-04-10T18:05:02","date_gmt":"2015-04-10T14:05:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=254982"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=254982","title":{"rendered":"\u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u043b\u0438\u043f\u0441\u0430 \u043f\u043e\u0434 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u043c \u0443\u0433\u043b\u043e\u043c \u0432 canvas \u043d\u0430 JavaScript"},"content":{"rendered":"<p>     \t\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u043b\u0438\u043f\u0441\u043e\u0432 \u043f\u043e\u0434 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u043c \u0443\u0433\u043b\u043e\u043c \u0432 canvas \u043d\u0430 JavaScript. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a\u0438\u043c\u0438-\u043b\u0438\u0431\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438 \u0432 \u0441\u0442\u043e\u043b\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c, \u0442\u0430\u043a \u0447\u0442\u043e \u044f \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u043d\u0430 \u043f\u043e\u0438\u0441\u043a\u0438 \u0441\u0442\u0430\u0442\u044c\u0438-\u043c\u0430\u043d\u0443\u0430\u043b\u0430 \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443. \u041f\u043e\u0438\u0441\u043a\u0438 \u043d\u0435 \u0443\u0432\u0435\u043d\u0447\u0430\u043b\u0438\u0441\u044c \u0443\u0441\u043f\u0435\u0445\u043e\u043c, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c \u043e\u043f\u044b\u0442\u043e\u043c.\u0424\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0443. \u041d\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <i>drawEllipse(coords, sizes, vector)<\/i>, \u0433\u0434\u0435:<\/p>\n<ul>\n<li>coords \u2014 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0446\u0435\u043d\u0442\u0440\u0430 \u044d\u043b\u043b\u0438\u043f\u0441\u0430 \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 [x, y]<\/li>\n<li>sizes \u2014 \u0434\u043b\u0438\u043d\u044b \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438 \u043c\u0430\u043b\u043e\u0439 \u043f\u043e\u043b\u0443\u043e\u0441\u0435\u0439 \u044d\u043b\u043b\u0438\u043f\u0441\u0430 \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 [a, b]<\/li>\n<\/ul>\n<p>  <a name=\"habracut\"><\/a>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u0431\u044b\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u044b \u043a\u0440\u0438\u0432\u044b\u0435 \u0411\u0435\u0437\u044c\u0435. \u0414\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0439 \u043a\u0440\u0438\u0432\u043e\u0439 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0447\u0435\u0442\u044b\u0440\u0435 \u0442\u043e\u0447\u043a\u0438: \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f, \u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0438 \u0434\u0432\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/201\/a8d\/52d\/201a8d52d60b44cc968a9e0d90e342b2.gif\"\/><\/p>\n<p>  \u041d\u0430\u0448 \u0438\u0441\u043a\u043e\u043c\u044b\u0439 \u044d\u043b\u043b\u0438\u043f\u0441 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0434\u0432\u0443\u0445 \u0442\u0430\u043a\u0438\u0445 \u043a\u0440\u0438\u0432\u044b\u0445, \u043f\u0440\u0438\u0447\u0435\u043c \u043d\u0435\u0442\u0440\u0443\u0434\u043d\u043e \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u044b\u0448\u0435\u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0443\u0442 \u0432\u0435\u0440\u0448\u0438\u043d\u0430\u043c\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0430\u0448 \u044d\u043b\u043b\u0438\u043f\u0441.<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/6cd\/a38\/098\/6cda380987f746078519dd7cbb73d013.png\"\/><\/p>\n<ol>\n<li> \u0418\u043c\u0435\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u043a\u0442\u043e\u0440 <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/288\/8b2\/bea\/2888b2bea4da4d79bf16395940521209.png\"\/><br \/>   \u041d\u0430\u0439\u0434\u0435\u043c \u0435\u0434\u0438\u043d\u0438\u0447\u043d\u044b\u0439 \u0432\u0435\u043a\u0442\u043e\u0440 <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/6ed\/bd9\/b49\/6edbd9b4964347dead6b9a3f93c2f603.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/f32\/3cf\/7d7\/f323cf7d72e34434aafe24595ae084b5.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/a10\/523\/2b1\/a105232b15b34759ab1cc59d734c99e2.png\"\/><br \/>   \u041d\u0430\u0439\u0434\u0435\u043c \u0435\u0434\u0438\u043d\u0438\u0447\u043d\u044b\u0439 \u0432\u0435\u043a\u0442\u043e\u0440 <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/c56\/df8\/24c\/c56df824c9c143b89d0574716eb6eb0b.png\"\/><br \/>   \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u043a\u0430\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u043e\u043b\u044c \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043f\u0435\u0440\u043f\u0435\u043d\u0434\u0438\u043a\u0443\u043b\u044f\u0440\u043d\u044b: <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/512\/e61\/163\/512e6116362f44509e2aec3efbc3124c.png\"\/><br \/>   \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/ff9\/f2e\/1e7\/ff9f2e1e7c9e43a89b610caa20f231ce.png\"\/><\/li>\n<li> \u041d\u0430\u0439\u0434\u0435\u043c \u0432\u0435\u043a\u0442\u043e\u0440\u044b <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/408\/24d\/b0d\/40824db0db9a4eea96e7a3d74eac5b84.png\"\/>, \u0442\u043e\u0447\u043a\u0438 A<sub>1<\/sub>, A<sub>2<\/sub>, B<sub>1<\/sub>, B<sub>2<\/sub><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/80d\/dba\/631\/80ddba631c5541e0bd297837efe342e2.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/eda\/54e\/6ab\/eda54e6ab6c540cb94977f54741cf988.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/a1f\/574\/e3e\/a1f574e3ea634ebdb59e39f6ad915e39.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/2ed\/f83\/75a\/2edf8375ae1f4e6eb0bd415b100a7ac6.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/85a\/0a9\/1a6\/85a0a91a60b1476aa2ee76f7eb17bc76.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/84f\/275\/d1d\/84f275d1db4a46c99baf5fafc6118f96.png\"\/><\/li>\n<li> \u041d\u0430\u0439\u0434\u0435\u043c \u0432\u0435\u043a\u0442\u043e\u0440\u044b <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/3ba\/bac\/38e\/3babac38ed08471b978be5e8e2036b21.png\"\/>, \u0442\u043e\u0447\u043a\u0438 C<sub>1<\/sub>, C<sub>2<\/sub>, C<sub>3<\/sub>, C<sub>4<\/sub><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/423\/7c6\/373\/4237c6373fea4874a9cad1ffeb83d4f6.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/78e\/c8f\/ba3\/78ec8fba37ef453bb04a9b5aa5b7ea8b.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/d0d\/32e\/552\/d0d32e5529e046f5b648d8aa720c2704.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/5bc\/4d7\/41a\/5bc4d741ab44444c9c97a479d59e3226.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/03b\/566\/1bc\/03b5661bc4b84a1b87a15d5e0fccabf9.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/b9f\/334\/8af\/b9f3348afb4843d692a362df6f7d1f1c.png\"\/><\/li>\n<li> \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u043b\u0438\u043f\u0441\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0434\u0432\u0435 \u043a\u0440\u0438\u0432\u044b\u0435 \u0411\u0435\u0437\u044c\u0435:<br \/> \n<ul>\n<li>1-\u044f \u0438\u043c\u0435\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 B<sub>1<\/sub>, \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e B<sub>2<\/sub>, \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u0442\u043e\u0447\u043a\u0443 A<sub>1<\/sub><\/li>\n<li>2-\u044f \u0438\u043c\u0435\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 B<sub>2<\/sub>, \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e B<sub>1<\/sub>, \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u0442\u043e\u0447\u043a\u0443 A<sub>2<\/sub><\/li>\n<\/ul>\n<p> \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u0442\u0430\u043a\u0436\u0435, \u0447\u0442\u043e \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043a\u0440\u0438\u0432\u044b\u0445 \u0411\u0435\u0437\u044c\u0435 \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438. \u041d\u0435\u0434\u043e\u043b\u0433\u043e \u0434\u0443\u043c\u0430\u044f, \u044f \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u043b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0430\u043a\u043e\u0432\u044b\u0445 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043f\u0438\u0441\u0430\u043d \u044d\u043b\u043b\u0438\u043f\u0441. \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u0432\u0435\u0434\u044c \u0435\u0441\u043b\u0438 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u043a\u0440\u0438\u0432\u043e\u0439 \u0411\u0435\u0437\u044c\u0435, \u0442\u043e \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c, \u0447\u0442\u043e \u043e\u043d\u0430 \u043d\u0435 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0440\u0435\u0437\u043a\u0430, \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044e\u0449\u0435\u0433\u043e \u0434\u0432\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438.<br \/>  \u0418\u0437\u043e\u0431\u0440\u0430\u0437\u0438\u043c \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043a\u0440\u0438\u0432\u043e\u0439 \u0411\u0435\u0437\u044c\u0435 \u0432 \u0442\u043e\u0447\u043a\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043d\u0430 (\u043a\u0440\u0438\u0432\u0430\u044f) \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0431\u043b\u0438\u0437\u043a\u0430 \u043a \u043e\u0442\u0440\u0435\u0437\u043a\u0443 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/f80\/f83\/7d8\/f80f837d830e44b0b72146c7d1f5d46f.png\"\/><\/p>\n<p>  \u0418\u0437 \u0440\u0438\u0441\u0443\u043d\u043a\u0430 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442 \u044d\u0442\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 (A<sub>1<\/sub>) \u0434\u043e \u043e\u0442\u0440\u0435\u0437\u043a\u0430 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 (C<sub>1<\/sub>, C<sub>2<\/sub>) \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044c \u043e\u0442 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0446\u0435\u043d\u0442\u0440\u043e\u043c \u0438\u0441\u043a\u043e\u043c\u043e\u0433\u043e \u044d\u043b\u043b\u0438\u043f\u0441\u0430 (O) \u0438 \u0442\u0435\u043c \u0436\u0435 \u043e\u0442\u0440\u0435\u0437\u043a\u043e\u043c (C<sub>1<\/sub>, C<sub>2<\/sub>), \u0442\u043e \u0435\u0441\u0442\u044c:<br \/>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/40a\/83e\/95e\/40a83e95e99548c3951e06de5833f26c.png\"\/>  <\/li>\n<li> \u0420\u0435\u0448\u0438\u043c \u0443\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/746\/8c6\/e48\/7468c6e48e7542feb99311fbbeeafcf3.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/243\/d33\/22d\/243d3322d9834d24a58143c7501fd290.png\"\/><br \/>   <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/789\/e54\/27a\/789e5427a0cf46cdb0dcd1fc9bdcf408.png\"\/><br \/>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u043b\u0438\u043f\u0441\u0430 \u0441 \u043d\u0443\u0436\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043c\u043d\u043e\u0436\u0438\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440 <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/7e2\/9d8\/618\/7e29d8618514486c9eedbdca56b5a5d4.png\"\/> \u043d\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/cf1\/e1d\/7d2\/cf1e1d7d28374264b1cfff20f98cc0e6.png\"\/>, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f\u043c, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u043c \u0432 \u043f\u0443\u043d\u043a\u0442\u0430\u0445 1-4. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430\u0431\u043e\u0440\u044b \u0442\u043e\u0447\u0435\u043a (<b>B<sub>1<\/sub>, C<sub>1<\/sub>, C<sub>2<\/sub>, B<sub>2<\/sub><\/b> \u0438 <b>B<sub>2<\/sub>, C<sub>3<\/sub>, C<sub>4<\/sub>, B<sub>1<\/sub><\/b>) \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0434\u0432\u0443\u0445 \u043a\u0440\u0438\u0432\u044b\u0445 \u0411\u0435\u0437\u044c\u0435, \u0432\u043c\u0435\u0441\u0442\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u0438\u0441\u043a\u043e\u043c\u0443\u044e \u0444\u0438\u0433\u0443\u0440\u0443.  <\/li>\n<\/ol>\n<p>  <\/p>\n<hr\/>\n<p>  \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e <a href=\"http:\/\/test.freelight.ru\/ellipse\/\">\u0434\u0435\u043c\u043e<\/a> \u0438 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">\tfunction drawEllipse(ctx, coords, sizes, vector) { \t\tvar vLen = Math.sqrt(vector[0]*vector[0]+vector[1]*vector[1]); \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0434\u043b\u0438\u043d\u0443 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \t\tvar e = [vector[0]\/vLen, vector[1]\/vLen]; \/\/ \u0435\u0434\u0438\u043d\u0438\u0447\u043d\u044b\u0439 \u0432\u0435\u0440\u043a\u0442\u043e\u0440 e || vector \t\tvar p = 4\/3; \/\/ \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440  \t\tvar a = [e[0]*sizes[0]*p, e[1]*sizes[0]*p]; \/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0432\u0435\u043a\u0442\u043e\u0440 a, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \t\tvar b = [e[1]*sizes[1], -e[0]*sizes[1]]; \/\/ \u043d\u0430\u0445\u043e\u0434\u043c \u0432\u0435\u043a\u0442\u043e\u0440 b \t\t\/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0442\u043e\u0447\u043a\u0438 A1, B1, A2, B2 \t\tvar dotA1 = [coords[0]+a[0], coords[1]+a[1]];  \t\tvar dotB1 = [coords[0]+b[0], coords[1]+b[1]]; \t\tvar dotA2 = [coords[0]-a[0], coords[1]-a[1]]; \t\tvar dotB2 = [coords[0]-b[0], coords[1]-b[1]];  \t\t\/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0432\u0435\u043a\u0442\u043e\u0440\u0430 c1, c2 \t\tvar c1 = [a[0]+b[0], a[1]+b[1]];  \t\tvar c2 = [a[0]-b[0], a[1]-b[1]]; \t\t\/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0442\u043e\u0447\u043a\u0438 C1, C2, C3, C4 \t\tvar dotC1 = [coords[0]+c1[0], coords[1]+c1[1]]; \t\tvar dotC2 = [coords[0]+c2[0], coords[1]+c2[1]]; \t\tvar dotC3 = [coords[0]-c1[0], coords[1]-c1[1]]; \t\tvar dotC4 = [coords[0]-c2[0], coords[1]-c2[1]];  \t\t\/\/ \u0440\u0438\u0441\u0443\u0435\u043c \u043d\u0430\u0448 \u044d\u043b\u043b\u0438\u043f\u0441 \t\tctx.strokeStyle = 'black'; \t\tctx.beginPath(); \t\tctx.moveTo(dotB1[0], dotB1[1]); \/\/ \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \t\tctx.bezierCurveTo(dotC1[0], dotC1[1], dotC2[0], dotC2[1], dotB2[0], dotB2[1]); \/\/ \u0440\u0438\u0441\u0443\u0435\u043c \u043a\u0440\u0438\u0432\u0443\u044e \u0411\u0435\u0437\u044c\u0435 \t\tctx.bezierCurveTo(dotC3[0], dotC3[1], dotC4[0], dotC4[1], dotB1[0], dotB1[1]); \/\/ \u0438 \u0432\u0442\u043e\u0440\u0443\u044e \u0438\u0437 \u0442\u043e\u0447\u043a\u0438, \u0433\u0434\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \t\tctx.stroke(); \t\tctx.closePath();  \t\t\/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0432\u0435\u043a\u0442\u043e\u0440\u0443 a \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043b\u0438\u043d\u0443 \t\tvar a = [e[0]*sizes[0], e[1]*sizes[0]];  \t\t\/\/ \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u043e\u0442\u0440\u0435\u0437\u043a\u0438 \u043e\u0442 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0445 \u0434\u0440\u0443\u0433 \u043a \u0434\u0440\u0443\u0433\u0443 \u0438 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0434\u0430\u043b\u0435\u043a\u0438\u0445 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u0442\u043e\u0447\u0435\u043a \u044d\u043b\u043b\u0438\u043f\u0441\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043b\u0438 \u043c\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0439 \u044d\u043b\u043b\u0438\u043f\u0441 \t\tctx.beginPath(); \t\tctx.moveTo(coords[0]+a[0], coords[1]+a[1]); \t\tctx.lineTo(coords[0]-a[0], coords[1]-a[1]); \t\tctx.moveTo(coords[0]+b[0], coords[1]+b[1]); \t\tctx.lineTo(coords[0]-b[0], coords[1]-b[1]); \t\tctx.strokeStyle = 'red'; \t\tctx.stroke(); \t\tctx.closePath(); \t}  <\/code><\/pre>\n<p><img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/de1\/950\/446\/de19504464d54cab9858c3c01769af73.png\"\/>     \t<\/p>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/255485\/\"> http:\/\/habrahabr.ru\/post\/255485\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>     \t\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u043b\u0438\u043f\u0441\u043e\u0432 \u043f\u043e\u0434 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u043c \u0443\u0433\u043b\u043e\u043c \u0432 canvas \u043d\u0430 JavaScript. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a\u0438\u043c\u0438-\u043b\u0438\u0431\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438 \u0432 \u0441\u0442\u043e\u043b\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c, \u0442\u0430\u043a \u0447\u0442\u043e \u044f \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u043d\u0430 \u043f\u043e\u0438\u0441\u043a\u0438 \u0441\u0442\u0430\u0442\u044c\u0438-\u043c\u0430\u043d\u0443\u0430\u043b\u0430 \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443. \u041f\u043e\u0438\u0441\u043a\u0438 \u043d\u0435 \u0443\u0432\u0435\u043d\u0447\u0430\u043b\u0438\u0441\u044c \u0443\u0441\u043f\u0435\u0445\u043e\u043c, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c \u043e\u043f\u044b\u0442\u043e\u043c.\u0424\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0443. \u041d\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <i>drawEllipse(coords, sizes, vector)<\/i>, \u0433\u0434\u0435:<\/p>\n<ul>\n<li>coords \u2014 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0446\u0435\u043d\u0442\u0440\u0430 \u044d\u043b\u043b\u0438\u043f\u0441\u0430 \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 [x, y]<\/li>\n<li>sizes \u2014 \u0434\u043b\u0438\u043d\u044b \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438 \u043c\u0430\u043b\u043e\u0439 \u043f\u043e\u043b\u0443\u043e\u0441\u0435\u0439 \u044d\u043b\u043b\u0438\u043f\u0441\u0430 \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 [a, b]<\/li>\n<\/ul>\n<p>  <\/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-254982","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/254982","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=254982"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/254982\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=254982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=254982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=254982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}