{"id":164899,"date":"2013-01-06T22:07:03","date_gmt":"2013-01-06T18:07:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=164899"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=164899","title":{"rendered":"<span class=\"post_title\">\u0415\u0449\u0451 \u043e\u0434\u043d\u0430 \u00ab\u0421\u043e\u043b\u043d\u0435\u0447\u043d\u0430\u044f c\u0438\u0441\u0442\u0435\u043c\u0430\u00bb \u043d\u0430 HTML5 Canvas<\/span>"},"content":{"rendered":"<div class=\"content html_format\"> \t\t\t<img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/907\/391\/207\/9073912078cb49438e08c4dad13f89c1.png\"\/><br \/>  \u041f\u0435\u0440\u0435\u0434 \u041d\u043e\u0432\u044b\u043c \u0433\u043e\u0434\u043e\u043c \u043d\u0430 \u0445\u0430\u0431\u0440\u0435 \u0431\u044b\u043b\u0438 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u044b \u0434\u0432\u0430 \u0442\u043e\u043f\u0438\u043a\u0430 (<a href=\"http:\/\/habrahabr.ru\/post\/163703\/\">\u043f\u0435\u0440\u0432\u044b\u0439<\/a>, <a href=\"http:\/\/habrahabr.ru\/post\/163893\/\">\u0432\u0442\u043e\u0440\u043e\u0439<\/a>) \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u00ab\u0421\u043e\u043b\u043d\u0435\u0447\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b\u00bb \u043d\u0430 HTML5 Canvas. \u0411\u0435\u0433\u043b\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0432 \u0438\u0445 \u0438 \u0438\u0437\u0443\u0447\u0438\u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044f \u0443\u0434\u0438\u0432\u0438\u043b\u0441\u044f \u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043a\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0430\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0442\u0430\u043a \u043d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0412\u043e\u043e\u0440\u0443\u0436\u0438\u0432\u0448\u0438\u0441\u044c Notepad++ \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432\u0441\u0451 \u043b\u0438 \u0442\u0430\u043a \u043f\u043b\u043e\u0445\u043e, \u043d\u0430\u043f\u0438\u0441\u0430\u0432 \u0441\u0432\u043e\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<p>  \u0422\u0417 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432\u0441\u0451 \u0442\u0435\u043c \u0436\u0435. 12 \u043f\u043b\u0430\u043d\u0435\u0442, \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0432\u043e\u0439 \u2014 40 \u0441\u0435\u043a\u0443\u043d\u0434, \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043d\u0430 20 \u0441\u0435\u043a\u0443\u043d\u0434 \u0434\u043e\u043b\u044c\u0448\u0435. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0432\u043e\u0438\u0445 \u043e\u0440\u0431\u0438\u0442\u0430\u0445. \u0423 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0435\u0441\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u043d\u0435\u0451. \u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043f\u043b\u0430\u043d\u0435\u0442\u0443 \u043e\u043d\u0430 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u0415\u0441\u043b\u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0434 \u043e\u0440\u0431\u0438\u0442\u043e\u0439 \u2014 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u0435\u0451. \u0412\u0441\u0451 \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 Opera 12+, IE9+, Chrome \u0438 FF. <\/p>\n<p>  \u2014 \u042f \u043d\u0435 \u0445\u043e\u0447\u0443 \u043d\u0438\u0447\u0435\u0433\u043e \u0447\u0438\u0442\u0430\u0442\u044c, \u0434\u0430\u0432\u0430\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442!<br \/>  \u2014 \u0414\u0435\u0440\u0436\u0438: <a href=\"http:\/\/dl.dropbox.com\/u\/6566435\/Canvas\/SolarSystem\/main.html\">\u0436\u043c\u044f\u043a<\/a><a name=\"habracut\"><\/a><\/p>\n<p>  \u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c. \u0421\u043e\u0437\u0434\u0430\u044e \u043d\u043e\u0432\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0432 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 Dropbox. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e \u0434\u0435\u043b\u044e \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438 js\/css\/img, \u0432 \u043a\u043e\u0440\u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u044e \u0444\u0430\u0439\u043b main.html, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432 \u043e\u0434\u043d\u043e \u0446\u0435\u043b\u043e\u0435.<\/p>\n<h4>\u041f\u0435\u0440\u0432\u044b\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438<\/h4>\n<p>  \u0412 \u043d\u0430\u0441\u043b\u0435\u0434\u0438\u0435 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u043c\u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438: \u0441\u043e\u043b\u043d\u0446\u0435, \u0437\u0430\u0434\u043d\u0438\u0439 \u0444\u043e\u043d \u0438 \u0442\u0430\u0439\u043b\u044b \u043f\u043b\u0430\u043d\u0435\u0442 (\u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0431\u043e\u043b\u044c\u0448\u0435). \u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a-\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u0437\u0430 \u043e\u0434\u043d\u043e \u0438 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u041a \u0441\u043b\u043e\u0432\u0443, \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0443 \u043c\u0435\u043d\u044f \u0431\u0443\u0434\u0435\u0442 \u0447\u0435\u0442\u044b\u0440\u0435: Point, Orbit, Planet \u0438 Tile. \u041f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u043e \u043a\u0430\u0436\u0434\u043e\u043c. Point \u044d\u0442\u043e \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u0438\u043c\u0435\u0435\u0442 \u0434\u0432\u0430 \u043f\u043e\u043b\u044f, x \u0438 y \u2014 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435, \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u0432:.set(), .clone(), .getDis() \u2014 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442, \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u043e\u0447\u043a\u0438. \u041e\u0431\u044a\u0435\u043a\u0442 Orbit \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0446\u0435\u043d\u0442\u0440 \u043e\u0440\u0431\u0438\u0442\u044b, \u0435\u0451 \u0440\u0430\u0434\u0438\u0443\u0441 \u0438 \u043f\u043b\u0430\u043d\u0435\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u043f\u043e \u043d\u0435\u0439. (\u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u043e\u0440\u0431\u0438\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u043e\u0440\u043c\u0443\u043b\u0430\u043c\u0438, \u043d\u043e \u044d\u0442\u043e \u0432 \u0438\u0434\u0435\u0430\u043b\u0435, \u0430 \u0443 \u043c\u0435\u043d\u044f \u0432\u0441\u0435 \u043e\u0440\u0431\u0438\u0442\u044b \u2014 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438). \u0422\u0440\u0435\u0442\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u2014 Planet. \u041f\u043b\u0430\u043d\u0435\u0442\u0430 \u0438\u043c\u0435\u0435\u0442 \u0438\u043c\u044f, \u0442\u043e\u0447\u043a\u0443 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0446\u0435\u043d\u0442\u0440\u0430 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435, \u0440\u0430\u0434\u0438\u0443\u0441, \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f, \u0438 \u0443\u0433\u043e\u043b \u043d\u0430\u043a\u043b\u043e\u043d\u0430 \u0432 \u0433\u0440\u0430\u0434\u0443\u0441\u0430\u0445. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 Tile \u0445\u0440\u0430\u043d\u0438\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u0447\u0435\u0442\u044b\u0440\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0438\u0441\u0443\u043d\u043a\u0430 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438: \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430, \u0432\u044b\u0441\u043e\u0442\u0443 \u0438 \u0448\u0438\u0440\u0438\u043d\u0443. \u0422\u0430\u0439\u043b \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u043e\u043c .draw(x, y), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0438\u0441\u0443\u0435\u0442 \u0435\u0433\u043e \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 \u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0412\u043f\u0440\u043e\u0447\u0435\u043c \u0437\u0430\u0447\u0435\u043c \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430, \u043b\u0443\u0447\u0448\u0435 \u043a\u043e\u0434<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">\/\/ Point.js function Point(x, y) {     this.x;     this.y;     this.set(x, y); \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b }; Point.prototype = {     set: function(x, y) {         this.x = x || 0;         this.y = y || 0;     },     getDis: function(other) {         return Math.sqrt(Math.pow(other.x - this.x, 2) + Math.pow(other.y - this.y, 2));     },     clone: function() {         return new Point(this.x, this.y);     } }; \/\/ Orbit.js function Orbit(center, radius) {     this.center = center;     this.radius = radius;          this.planet = null;     \/\/ \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0443 \u043e\u0440\u0431\u0438\u0442\u044b \u043d\u0435\u0442 \u043f\u043b\u0430\u0435\u043d\u0442\u044b     this.ctx    = null;     this.mouse  = null; }; \/\/ Planet.js function Planet(orbit, radius, time) {     this.pos    = new Point(0, 0);     this.orbit  = orbit;     this.radius = radius;     this.speed  = Math.PI*2 \/ (time * 1000); \/\/ \u0420\u0430\u0434\u0438\u0430\u043d \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0443     this.angle  = ~~(Math.random() * 360);   \/\/ \u0421\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043b\u0430\u043d\u0435\u0442\u044b     this.animate = true;     this.name;     this.tile;     this.ctx;     this.orbit.setProperty({'planet': this}); \/\/ \u0421\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u043e\u0440\u0431\u0438\u0442\u0435 \u043e \u043f\u043b\u0430\u043d\u0435\u0442\u0435 }; \/\/ Tile.js function Tile(ctx, img, x, y, w, h) {     this.ctx    = ctx; \/\/ \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u0430\u043d\u0432\u0443     this.img    = img; \/\/ \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435     this.x      = x;     this.y      = y;     this.width  = w;     this.height = h; }; Tile.prototype = {     draw: function(x, y) {         this.ctx.drawImage(this.img, this.x, this.y, this.width, this.height,             x, y, this.width, this.height);     } };  \/**  * @param (object) property \u0421\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043b\u0435\u0439 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u0443  * @param (bool) add        \u0415\u0441\u043b\u0438 \u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043d\u0435\u0442 \u043f\u043e\u043b\u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0432 property, \u0441\u0442\u043e\u0438\u0442 \u043b\u0438 \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u0442\u044c  *\/ Object.prototype.setProperty = function(property, add) {     if (add !== true) add = false;     for (var key in property) {         if (property.hasOwnProperty(key)) {              if (typeof this[key] !== 'undefined' || add) {                 this[key] = property[key];             }         }     }     return this; } <\/code><\/pre>\n<\/div>\n<\/div>\n<p>  \u0427\u0442\u043e \u0431\u044b \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441\u0432\u043e\u0439 \u0441\u0435\u0442\u0435\u0440, \u044f \u0440\u0435\u0448\u0438\u043b \u0441\u0447\u0438\u0442\u0435\u0440\u0438\u0442\u044c \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e .setProperty() \u0432 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0435 Object. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u043f\u043e\u043b\u044f \u0438 \u043c\u0435\u043d\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0443 \u0441\u0442\u0430\u0440\u044b\u0445.<\/p>\n<p>  \u0412\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0421 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u044f \u0437\u0430\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0441\u0442\u0430\u043b, \u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c: \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u2014 \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445. \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0432\u043f\u0430\u043b\u0438, \u0442\u043e \u0432\u0441\u0451 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c \u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0415\u0441\u0442\u044c \u0443 \u044d\u0442\u043e \u0440\u0430\u0437\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0430 \u043e\u0434\u0438\u043d \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043c\u0438\u043d\u0443\u0441, \u043d\u0435\u043b\u044c\u0437\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u043e \u0432 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">var IM = {                      \/\/ Images Manager     store: {},                 \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a     imagesAdded: 0,             \/\/ \u0421\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e     imagesLoaded: 0,            \/\/ \u0421\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e     add: function(url, name) {  \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f         var self = this;         var img = new Image();         img.onload = function() {             self.imagesLoaded++;             if (self.imagesAdded == self.imagesLoaded) {                 self.afterRun(); \/\/ \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u0432\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e             }         }         img.src = url;         this.store[name] = img;         this.imagesAdded++;     },     afterRun: function() {     \/\/ \u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438         render(new Date() * 1); \/\/ \u041f\u0435\u0440\u0435\u0434\u0430\u044e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0432\u043d\u0443\u0442\u0440\u044c     }  }; IM.add('img\/sun.png', 'sun');           \/\/ \u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 IM.add('img\/planets.png', 'planets');   \/\/ \u0418 \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 <\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h4>\u041f\u043b\u0430\u043d\u0435\u0442\u044b<\/h4>\n<p>  \u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u043d\u0435\u0442\u044b, \u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0437\u043c\u0435\u043f\u043b\u044f\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Planet, \u0432 \u043d\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u043e\u0440\u0431\u0438\u0442\u0443, \u0440\u0430\u0434\u0438\u0443\u0441 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0438 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0432\u043e\u043a\u0440\u0443\u0433 \u0446\u0435\u043d\u0442\u0440\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u044b (\u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445), \u0430 \u0442\u0430\u043a \u0436\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430: \u0438\u043c\u044f, \u0442\u0430\u0439\u043b \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442. \u0421\u043e\u043b\u043d\u0446\u0435, \u043a\u0441\u0442\u0430\u0442\u0438, \u0442\u043e\u0436\u0435 \u043f\u043b\u0430\u043d\u0435\u0442\u0430, \u043d\u043e \u0441 \u043d\u0443\u043b\u0435\u0432\u044b\u043c \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c \u0443 \u043e\u0440\u0431\u0438\u0442\u044b.<\/p>\n<pre><code class=\"javascript\">var planets = [];   \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u043f\u043b\u0430\u043d\u0435\u0442 var mouse = {};     \/\/ \u0411\u0443\u0434\u0443\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043c\u044b\u0448\u0438 var globalCenter = new Point(canvas.width \/ 2, canvas.height \/ 2); \/\/ \u0426\u0435\u043d\u0442\u0440 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \/\/ \u041d\u043e\u0432\u0430\u044f \u043e\u0440\u0431\u0438\u0442\u0430 \u0441 \u0446\u0435\u043d\u0442\u0440\u043e\u043c globalCenter \u0438 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c \u043d\u043e\u043b\u044c var orbit  = new Orbit(globalCenter.clone(), 0).setProperty({     ctx:   ctx,     \/\/ \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442     mouse: mouse    \/\/ \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043c\u044b\u0448\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0449\u0451 \u043d\u0435\u0442 }, true); \/\/ \u041d\u043e\u0432\u0430\u044f \u043f\u043b\u0430\u043d\u0435\u0442\u0430 \u0441 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c 50 \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438 1. \u0410 \u0442\u0430\u043a \u0436\u0435 \u0441 \u0442\u0430\u0439\u043b\u043e\u043c \u0438 \u0438\u043c\u0435\u043d\u0435\u043c. var planet = new Planet(orbit, 50, 1).setProperty({     tile: new Tile(this.ctx, this._resources['sun'], 0, 0, 100, 100),     name: 'Sun',     ctx:  ctx }, true); planets.push(planet); \/\/ \u0421\u043f\u0438\u0441\u043e\u043a \u0438\u043c\u0451\u043d var names = ['Moon', 'Phobos', 'Deimos', 'Dactyl', 'Linus', 'Io', 'Europa', 'Ganymede',     'Callisto', 'Amalthea', 'Himalia', 'Elara', 'Pasiphae', 'Taurus', 'Sinope', 'Lysithea',     'Carme', 'Ananke', 'Leda', 'Thebe', 'Adrastea', 'Metis', 'Callirrhoe', 'Themisto',      '1975', '2000', 'Megaclite', 'Taygete', 'Chaldene', 'Harpalyke']; var tiles = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; \/\/ \u0421\u0434\u0432\u0438\u0433\u0438 \u0442\u0430\u0439\u043b\u043e\u0432 \u0432\u043f\u0440\u0430\u0432\u043e var time  = 40; shuffle(names); \/\/ \u041f\u0435\u0440\u0435\u043c\u0435\u0448\u0438\u0432\u0430\u044e \u043c\u0430\u0441\u0441\u0438\u0432\u044b shuffle(tiles); for (var i = 0; i &lt; 12; ++i) {     \/\/ \u041f\u0435\u0440\u0432\u0430\u044f \u043f\u043b\u0430\u043d\u0435\u0442\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u0430 \u043d\u0430 90 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430, \u043a\u0430\u0436\u0434\u0430\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0435\u0449\u0451 \u043d\u0430 26     orbit  = new Orbit(globalCenter.clone(), 90+i*26).setProperty({         ctx:   this.ctx,         mouse: this.mouse     }, true);     planet = new Planet(orbit, 13, time).setProperty({         tile: new Tile(this.ctx, this._resources['planets'], tiles[i]*26, 0, 26, 26),         name: names[i],         ctx:  this.ctx     }, true);     this.planets.push(planet);     time += 20; } <\/code><\/pre>\n<p>  \u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u0435\u0441\u0442\u044c \u043f\u043b\u0430\u043d\u0435\u0442\u044b, \u043d\u043e \u0432\u043e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043e\u043d\u0438 \u0435\u0449\u0451 \u043d\u0435 \u0443\u043c\u0435\u044e\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0438 \u043d\u0435 \u0437\u043d\u0430\u044e\u0442 \u043a\u0430\u043a \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0431\u044f. \u041d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c! \u0421\u043e\u0437\u0434\u0430\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e render(lastTime), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0446\u0435\u043d\u044b. \u0420\u0435\u043d\u0434\u0435\u043d \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0443 \u043f\u043b\u0430\u043d\u0435\u0442 \u0438 \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c. \u0414\u0430\u043b\u0435\u0435 \u0432 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0435 Planet \u0441\u043e\u0437\u0434\u0430\u044e \u043c\u0435\u0442\u043e\u0434 .redner(deltaTime), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f, \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0435\u0435 \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0446\u0435\u043d\u044b. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u0440\u0438\u0441\u0443\u0435\u0442 \u043f\u043b\u0430\u043d\u0435\u0442\u0443 \u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445. \u0422\u0430\u043a \u0436\u0435 \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e .showInfo() \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u043b\u0430\u043d\u0435\u0442\u0435.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">function render(lastTime) {     var curTime = new Date();     requestAnimationFrame(function(){ render(curTime); });          ctx.clearRect(0, 0, canvas.width, canvas.height);     for (var i = 0, il = planets.length; i &lt; il; ++i) {         planets[i].render(curTime - lastTime);     } } Planet.prototype = {     drawBorder: function() { \/\/ \u041e\u0431\u0432\u043e\u0434\u043a\u0430 \u043f\u043b\u0430\u043d\u0435\u0442\u044b         var ctx = this.ctx;         ctx.beginPath();         ctx.arc(this.pos.x, this.pos.y, this.radius * 1.1, 0, Math.PI * 2, true);         ctx.closePath();         ctx.stroke();     },     showInfo: function() {         var x = this.pos.x + this.radius * 0.7; \/\/ \u0412 \u043a\u0430\u043a\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443         var y = this.pos.y + this.radius * 0.9; \/\/ \u043f\u043e ox \u0438 oy                      ctx.fillStyle = '#002244';         ctx.fillRect(x, y, 100, 24);         ctx.fillStyle = '#0ff';         ctx.fillText(this.name, x + 50, y + 17);     },     render: function(deltaTime) {         \/\/ r(fi) = radius, r - \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435, fi - \u0443\u0433\u043e\u043b \u0432 \u0433\u0440\u0430\u0434\u0443\u0441\u0430\u0445         this.pos.x = this.orbit.globalCenter.x + this.orbit.radius * Math.cos(this.angle);         this.pos.y = this.orbit.globalCenter.y + this.orbit.radius * Math.sin(this.angle);         this.angle += this.speed * deltaTime; \/\/ \u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e \u0443\u0433\u043e\u043b                      if (typeof this.tile !== 'undefined') { \/\/ \u0415\u0441\u043b\u0438 \u0443 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0435\u0441\u0442\u044c \u0442\u0430\u0439\u043b \u0442\u043e \u0440\u0438\u0441\u0443\u044e \u0435\u0451             this.tile.draw(this.pos.x - this.radius, this.pos.y - this.radius);         }     } }; <\/code><\/pre>\n<\/div>\n<\/div>\n<p>  \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u044e, \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e \u043e\u0448\u0438\u0431\u043a\u0438, \u043e\u043f\u044f\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e \u0438 \u0443\u0440\u0430: \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u043a\u0440\u0443\u0436\u0430\u0442\u0441\u044f \u0432\u043e\u043a\u0440\u0443\u0433 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u0421\u043e\u043b\u043d\u0446\u0430.<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/a02\/643\/1c5\/a026431c57d614cc974d9c7214b6879e.png\" alt=\"image\" align=\"left\"\/><br \/>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u043e\u0432\u0441\u0435\u043c \u0447\u0443\u0442\u044c-\u0447\u0443\u0442\u044c: \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043e\u0440\u0431\u0438\u0442\u044b, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0438\u0445 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u043b\u0430\u043d\u0435\u0442\u0430\u0445. \u041d\u0443\u0436\u043d\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043c\u044b\u0448\u0435, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u043a\u0443\u0434\u0430 \u043e\u043d\u0430 \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f, \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u043b\u0438, \u043d\u0430\u0436\u0430\u0442\u044b \u0438\u043b\u0438 \u043e\u0442\u0436\u0430\u0442\u044b \u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0430 \u043d\u0435\u0439. \u0417\u0430 \u0435\u0451 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u043d\u0430\u0434 \u043a\u0430\u043d\u0432\u0430\u0441\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c MouseController. \u0418\u043c\u0435\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 hover. \u0415\u0441\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u044c \u0440\u0430\u0437\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0438 \u0446\u0435\u043d\u0442\u0440\u0430 \u043e\u0440\u0431\u0438\u0442\u044b \u043c\u0435\u043d\u044c\u0448\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u0443 \u043c\u0435\u043d\u044f \u044d\u0442\u043e 14px), \u0442\u043e \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c hover. \u0422\u0435\u043f\u0435\u0440\u044c \u0435\u0441\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0445\u043e\u0432\u0435\u0440 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u0442\u043e \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043e\u043a\u0440\u0443\u0433 \u0446\u0435\u043d\u0442\u0440\u0430 \u043e\u0440\u0431\u0438\u0442\u044b \u043b\u0438\u043d\u0438\u0435\u0439 \u043f\u043e\u0436\u0438\u0440\u043d\u0435\u0435, \u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u0435\u0451, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043f\u043b\u0430\u043d\u0435\u0442\u0430 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043e\u043a\u0440\u0443\u0433, \u043d\u043e \u0443\u0436\u0435 \u0432\u043e\u043a\u0440\u0443\u0433 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u043f\u043b\u0430\u043d\u0435\u0442\u044b. \u0415\u0441\u043b\u0438 \u0445\u043e\u0432\u0435\u0440\u0430 \u043d\u0435\u0442, \u0442\u043e \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0446\u0435\u043b\u044c\u043d\u0430\u044f \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u0445\u0443\u0434\u043e\u0439 \u043b\u0438\u043d\u0438\u0435\u0439.<br \/>  \u0421 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u043b\u0430\u043d\u0435\u0442 \u0432\u0441\u0451 \u043f\u0440\u043e\u0449\u0435. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0430\u0434 \u043a\u0430\u043a\u043e\u0439 \u043f\u043b\u0430\u043d\u0435\u0442\u043e\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0443\u0440\u0441\u043e\u0440, \u0438 \u044d\u0442\u043e\u0439 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c .showInfo(). \u0415\u0441\u0442\u044c \u043e\u0434\u043d\u043e \u043d\u043e, \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442 \u043d\u0443\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439, \u0438\u043d\u0430\u0447\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043c\u043e\u0433\u0443 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0435\u0451.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">Orbit.prototype = {     draw: function() {         var ctx = this.ctx;         var hover = this.mouse && Math.abs(mouse.pos.getDis(this.center) - this.radius) &lt; 13; \/\/ \u0412\u043e\u0442 \u043e\u043d \u0445\u043e\u0432\u0435\u0440         if (hover) { \/\/ \u0412\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u0430\u044f \u043e\u0440\u0431\u0438\u0442\u0430             ctx.lineWidth = 2;             ctx.strokeStyle = 'rgb(0,192,255)';             ctx.beginPath(); \/\/ \u041e\u0440\u0431\u0438\u0442\u0430             ctx.arc(this.center.x, this.center.y, this.radius, 0, Math.PI * 2, true);             ctx.closePath();             ctx.stroke();                          if (typeof this.planet !== null) { \/\/ \u0415\u0441\u043b\u0438 \u043d\u0430 \u043e\u0440\u0431\u0438\u0442\u0435 \u0435\u0441\u0442\u044c \u043f\u043b\u0430\u043d\u0435\u0442\u0430                 \/\/ \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0447\u0438\u0441\u0442\u044e \u043a\u0443\u0441\u043e\u043a \u0433\u0434\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043b\u0430\u043d\u0435\u0442\u0430                 ctx.clearRect(this.planet.pos.x - this.planet.radius, this.planet.pos.y - this.planet.radius,                     this.planet.radius * 2, this.planet.radius * 2);                 \/\/ \u0418 \u043d\u0430 \u0435\u0433\u043e \u043c\u0435\u0441\u0442\u0435 \u043d\u0430\u0440\u0438\u0441\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043e\u043a\u0440\u0443\u0433 \u043f\u043b\u0430\u043d\u0435\u0442\u044b                 this.planet.drawBorder();             }         } else { \/\/ \u041e\u0431\u044b\u0447\u043d\u0430\u044f \u043e\u0440\u0431\u0438\u0442\u0430             ctx.lineWidth = 1;             ctx.strokeStyle = 'rgba(0,192,255,0.5)';             ctx.beginPath();             ctx.arc(this.center.x, this.center.y, this.radius, 0, Math.PI * 2, true);             ctx.closePath();             ctx.stroke();         }     } function render(lastTime) {     var curTime = new Date();     requestAnimationFrame(function(){         render(curTime); \/\/ \u0417\u0430\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u0430\u0434\u0440     });          ctx.clearRect(0, 0, canvas.width, canvas.height);   \/\/ \u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0432\u0441\u0451     var showInfo = -1;                                  \/\/ \u0418\u043d\u0434\u0435\u043a\u0441 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435     for (var i = 0, il = planets.length; i &lt; il; ++i) { \/\/ \u041f\u0435\u0440\u0435\u0431\u043e\u0440 \u043f\u043b\u0430\u043d\u0435\u0442         planets[i].orbit.draw();                        \/\/ \u0420\u0438\u0441\u0443\u044e \u043e\u0440\u0431\u0438\u0442\u044b         planets[i].render(curTime - lastTime);          \/\/ \u0420\u0438\u0441\u0443\u044e \u043f\u043b\u0430\u043d\u0435\u0442\u044b         if (Math.abs(planets[i].pos.x-mouse.pos.x) &lt; planets[i].radius  \/\/ \u0415\u0441\u0442\u044c \u043b\u0438 \u0445\u043e\u0432\u0435\u0440 \u043d\u0430\u0434 \u043f\u043b\u0430\u043d\u0435\u0442\u043e\u0439             && Math.abs(planets[i].pos.y-mouse.pos.y) &lt; planets[i].radius) {             showInfo = i; \/\/ \u0415\u0441\u043b\u0438 \u0434\u0430, \u0442\u043e \u043d\u0430\u0434 \u043a\u0430\u043a\u043e\u0439             \/\/if (mouse.pressed) { \/\/ \u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043b\u0430\u043d\u0435\u0442\u0443 \u0435\u0441\u043b\u0438 \u0431\u044b\u043b \u043a\u043b\u0438\u043a \u043f\u043e \u043d\u0435\u0439             \/\/    planets[i].animate = planets[i].animate ? false : true;             \/\/}         }     }     if (showInfo &gt; -1) { \/\/ \u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u043b\u0430\u043d\u0435\u0442\u0435, \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u0443\u0440\u0441\u043e\u0440         planets[showInfo].showInfo();         document.body.style.cursor = 'pointer';     } else {         document.body.style.cursor = 'default';     } } }; \u041e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u044f \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u043d\u0435 \u0441\u0442\u0430\u043b. \u041f\u043e\u0437\u0436\u0435 \u043f\u0435\u0440\u0435\u043b\u043e\u0436\u0438\u043b \u043a\u043e\u0434 \u0432 \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 App.  <\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <a href=\"http:\/\/dl.dropbox.com\/u\/6566435\/Canvas\/SolarSystem\/main.html\">\u0414\u0435\u043c\u043e<\/a> | <a href=\"http:\/\/dl.dropbox.com\/u\/6566435\/Canvas\/SolarSystem\/SolarSystem.zip\">\u0421\u043a\u0430\u0447\u0430\u0442\u044c<\/a><\/p>\n<h4>\u0412\u044b\u0432\u043e\u0434\u044b<\/h4>\n<p>  \u0412 \u0442\u0435\u043e\u0440\u0438\u0438 \u0438\u0434\u0435\u044f \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0442\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043b\u0443\u0447\u0448\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0438 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u044d\u0442\u043e \u0442\u0430\u043a \u0434\u043b\u044f \u043e\u0431\u044a\u0451\u043c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041d\u043e \u0432 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0442\u0430\u043c \u0433\u0434\u0435 \u043d\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043d\u0435\u0437\u0430\u0447\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u043e\u0442\u0435\u043d.<br \/>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u043c\u043e\u0451\u043c \u041f\u041a (AMD Athlon64 \u04452 4600+ 2,4GHz, GeForce 210).<br \/>  \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b:<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/d98\/cde\/78d\/d98cde78da5a1a317c088a632329b08a.png\"\/><br \/>  \u041d\u0430 LibCanvas (\u043f\u043e\u0445\u043e\u0436\u0435 \u0447\u0442\u043e \u0443 \u043d\u0435\u0433\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0432 60 fps):<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/132\/e58\/c63\/132e58c63e0435704a565d58d34723e2.png\"\/><br \/>  \u041c\u043e\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f:<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/446\/45c\/950\/44645c9508033757fb8e3380ade5316b.png\"\/><\/p>\n<p>  \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435. \t\t\t \t\t\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\/164899\/\"> http:\/\/habrahabr.ru\/post\/164899\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\"> \t\t\t<img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/907\/391\/207\/9073912078cb49438e08c4dad13f89c1.png\"\/><br \/>  \u041f\u0435\u0440\u0435\u0434 \u041d\u043e\u0432\u044b\u043c \u0433\u043e\u0434\u043e\u043c \u043d\u0430 \u0445\u0430\u0431\u0440\u0435 \u0431\u044b\u043b\u0438 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u044b \u0434\u0432\u0430 \u0442\u043e\u043f\u0438\u043a\u0430 (<a href=\"http:\/\/habrahabr.ru\/post\/163703\/\">\u043f\u0435\u0440\u0432\u044b\u0439<\/a>, <a href=\"http:\/\/habrahabr.ru\/post\/163893\/\">\u0432\u0442\u043e\u0440\u043e\u0439<\/a>) \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u00ab\u0421\u043e\u043b\u043d\u0435\u0447\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b\u00bb \u043d\u0430 HTML5 Canvas. \u0411\u0435\u0433\u043b\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0432 \u0438\u0445 \u0438 \u0438\u0437\u0443\u0447\u0438\u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044f \u0443\u0434\u0438\u0432\u0438\u043b\u0441\u044f \u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043a\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0430\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0442\u0430\u043a \u043d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0412\u043e\u043e\u0440\u0443\u0436\u0438\u0432\u0448\u0438\u0441\u044c Notepad++ \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432\u0441\u0451 \u043b\u0438 \u0442\u0430\u043a \u043f\u043b\u043e\u0445\u043e, \u043d\u0430\u043f\u0438\u0441\u0430\u0432 \u0441\u0432\u043e\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<p>  \u0422\u0417 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432\u0441\u0451 \u0442\u0435\u043c \u0436\u0435. 12 \u043f\u043b\u0430\u043d\u0435\u0442, \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0432\u043e\u0439 \u2014 40 \u0441\u0435\u043a\u0443\u043d\u0434, \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043d\u0430 20 \u0441\u0435\u043a\u0443\u043d\u0434 \u0434\u043e\u043b\u044c\u0448\u0435. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0432\u043e\u0438\u0445 \u043e\u0440\u0431\u0438\u0442\u0430\u0445. \u0423 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0435\u0441\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u043d\u0435\u0451. \u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043f\u043b\u0430\u043d\u0435\u0442\u0443 \u043e\u043d\u0430 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u0415\u0441\u043b\u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0434 \u043e\u0440\u0431\u0438\u0442\u043e\u0439 \u2014 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u0435\u0451. \u0412\u0441\u0451 \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 Opera 12+, IE9+, Chrome \u0438 FF. <\/p>\n<p>  \u2014 \u042f \u043d\u0435 \u0445\u043e\u0447\u0443 \u043d\u0438\u0447\u0435\u0433\u043e \u0447\u0438\u0442\u0430\u0442\u044c, \u0434\u0430\u0432\u0430\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442!<br \/>  \u2014 \u0414\u0435\u0440\u0436\u0438: <a href=\"http:\/\/dl.dropbox.com\/u\/6566435\/Canvas\/SolarSystem\/main.html\">\u0436\u043c\u044f\u043a<\/a><\/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-164899","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/164899","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=164899"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/164899\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=164899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=164899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=164899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}