{"id":284296,"date":"2017-04-02T08:15:02","date_gmt":"2017-04-02T04:15:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=284296"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=284296","title":{"rendered":"\u041a\u0440\u0443\u0433\u043b\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a \u043d\u0430 Canvas"},"content":{"rendered":"<h3>\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e!<\/h3>\n<p>  \u0421\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u044b \u0432 \u043a\u0440\u0443\u0433\u043b\u044b\u0445 \u0433\u0440\u0430\u0444\u0438\u043a\u0430\u0445(?)<br \/>  \u0418 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e \u044f \u043f\u0440\u0438\u043d\u044f\u043b\u0441\u044f \u0438\u0441\u043a\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043f\u0443\u0442\u043d\u043e\u0433\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c (\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u044f \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u0437\u043d\u0430\u044e \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f)<br \/>  \u0411\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0442\u043e \u0447\u0442\u043e \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u044f \u043d\u0430\u0448\u0435\u043b \u0432 <a href=\"http:\/\/www.htmldrive.net\/items\/demo\/1241\/jQuery-mousewheel-Knob-effect\">\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 Knob<\/a>, \u043d\u043e \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0438\u0437\u043b\u0438\u0448\u0435\u043d, \u0442.\u043a \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0437\u0430\u0442\u0435\u0441\u0430\u043b\u0441\u044f \u0431\u0430\u0433. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u043e\u0447\u0438\u043d\u044f\u0442\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d6b\/6c8\/c40\/d6b6c8c40565d65870a58434c44951cc.png\" alt=\"image\"\/><\/p>\n<p>  <a name=\"habracut\"><\/a><\/p>\n<p>  \u0421\u043f\u0435\u0440\u0432\u0430 \u044f \u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 css, \u043d\u0443 \u0441\u0430\u043c\u0438 \u043f\u043e\u0441\u0443\u0434\u0438\u0442\u0435 \u2014 \u043a\u0440\u0443\u0433 \u0434\u0435\u043b\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 border-radius, \u0430 border-color \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043e\u0432\u2026 \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u043e \u043a 0%, 25%, 50%, 75% \u0438 100%:<\/p>\n<p>  html:  <\/p>\n<pre><code class=\"xml\">&lt;div class=&quot;dial procent0&quot;&gt;&lt;p&gt;0%&lt;\/p&gt;&lt;\/div&gt; &lt;div class=&quot;dial procent25&quot;&gt;&lt;p&gt;25%&lt;\/p&gt;&lt;\/div&gt; &lt;div class=&quot;dial procent50&quot;&gt;&lt;p&gt;50%&lt;\/p&gt;&lt;\/div&gt; &lt;div class=&quot;dial procent75&quot;&gt;&lt;p&gt;75%&lt;\/p&gt;&lt;\/div&gt; &lt;div class=&quot;dial procent100&quot;&gt;&lt;p&gt;100%&lt;\/p&gt;&lt;\/div&gt; <\/code><\/pre>\n<p>  scss:  <\/p>\n<pre><code>.dial { \twidth: 80px; \theight: 80px; \tfont-size: 20px; \ttext-align: center; \tline-height: 80px; \tborder: 6px solid #262832; \tborder-radius: 100%; \tmargin: 20px; \tdisplay: inline-block; \ttransform: rotate(-45deg); \tp { \t\tmargin: 0; \t\ttransform: rotate(45deg); \t} \t&.procent25 { \t\tborder-right-color: #689f38; \t} \t&.procent50 { \t\tborder-right-color: #689f38; \t\tborder-bottom-color: #689f38; \t} \t&.procent75 { \t\tborder-right-color: #689f38; \t\tborder-bottom-color: #689f38; \t\tborder-left-color: #689f38; \t} \t&.procent100 { \t\tborder-color: #689f38; \t} } <\/code><\/pre>\n<p>  <a href=\"https:\/\/jsfiddle.net\/FunnyBanana\/xrm9zqq8\/\">jsfiddle<\/a><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0440\u0430\u0441\u0441\u0443\u0436\u0434\u0430\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u043a\u043b\u044e\u0447\u0435 \u0434\u0430\u043b\u044c\u0448\u0435 \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u043a\u0440\u0443\u0433 \u043d\u0430\u0434 \u0434\u0440\u0443\u0433\u0438\u043c. \u0442.\u0435 \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c 33% \u0442\u043e \u043c\u044b \u0440\u0438\u0441\u0443\u0435\u043c 2 \u043a\u0440\u0443\u0433\u0430 \u043f\u043e 25%, \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u043a\u0440\u0443\u0433 \u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u0438 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u043c \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c 33% border, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432 \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442: <\/p>\n<p><math><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/cd8\/b0b\/634\/cd8b0b634afc45f53e40a3018d5b06a6.svg\" alt=\"$procent*3,6-90$\" data-tex=\"display\"\/><\/math><\/p>\n<p>  html:  <\/p>\n<pre><code class=\"xml\">&lt;div class=&quot;dial&quot;&gt;&lt;p&gt;33%&lt;\/p&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>  scss:  <\/p>\n<pre><code>.dial { \twidth: 80px; \theight: 80px; \tfont-size: 20px; \ttext-align: center; \tline-height: 80px; \tborder: 6px solid #262832; \tborder-radius: 100%; \tmargin: 20px; \tdisplay: inline-block; \ttransform: rotate(-45deg); \tborder-right-color: #1390d4; \tp { \t\tmargin: 0; \t\ttransform: rotate(45deg); \t} \t&::before { \t\tcontent: ''; \t\tdisplay: block; \t\tposition: absolute; \t\twidth: 80px; \t\theight: 80px; \t\tborder-radius: 100%; \t\tborder: 6px solid transparent; \t\tborder-right-color:#1390d4; \t\tmargin: -6px -6px; \t\ttransform: rotate(28.8deg); \t} } <\/code><\/pre>\n<p>  <a href=\"https:\/\/jsfiddle.net\/FunnyBanana\/0ew3zy85\/\">jsfiddle<\/a><\/p>\n<p>  \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a 51% \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043a\u0440\u0430\u0441\u0438\u0442\u044c border-bottom. \u0417\u0430\u0433\u0432\u043e\u0437\u0434\u043a\u0430 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u044b \u0432 \u043c\u043e\u0451\u043c \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u043d\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b, \u0430 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0441\u0432\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u2014 \u043c\u044f\u0433\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f \u043d\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0430 \u0432\u0435\u0434\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0434\u0440\u043e\u0431\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u2026 \u0422\u0443\u0442 \u0442\u043e \u043d\u0430\u043c \u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f JavaScript, \u043f\u0440\u0430\u0432\u0434\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0432 \u0434\u0436\u0430\u0432\u0435 \u043d\u0435\u0442 \u0438\u0431\u043e \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043e\u043d\u0438 \u0432\u043d\u0435 DOM-\u0434\u0435\u0440\u0435\u0432\u0430 \u0438 \u043a \u043d\u0438\u043c \u043d\u0435\u043b\u044c\u0437\u044f \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043a \u043f\u0440\u043e\u0441\u0442\u044b\u043c HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c. \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u043c\u043e\u0436\u043d\u043e ::before \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 span \u0438 \u043a\u0440\u0443\u0442\u0438\u0442\u044c \u0435\u0433\u043e\u2026 \u041d\u043e \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JavaScript \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a \u043d\u0430 canvas, \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0447\u0442\u043e \u0432 canvas \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f arc \u2014 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0438\u0441\u0443\u0435\u0442 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <i>\u0412\u0441\u0451 \u0447\u0442\u043e \u044f \u043f\u0438\u0441\u0430\u043b \u0432\u044b\u0448\u0435, \u043b\u0438\u0448\u044c \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0445\u043e\u0434 \u043c\u043e\u0438\u0445 \u043c\u044b\u0441\u043b\u0435\u0439<\/i><\/p>\n<p>  \u0420\u0438\u0441\u0443\u0435\u043c \u043a\u0440\u0443\u0433:  <\/p>\n<pre><code class=\"javascript\">var c=document.getElementById(&quot;myCanvas&quot;); var ctx=c.getContext(&quot;2d&quot;); ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke(); <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/51f\/774\/6b4\/51f7746b4dd213ee2e7ec92e6aa0a4c7.png\" alt=\"image\"\/><br \/>  <i>context.arc(x,y,r,sAngle,eAngle,counterclockwise);<\/i><\/p>\n<p>  \u041d\u0430 \u0441\u0447\u0451\u0442 <b>x<\/b>,<b>y<\/b> \u2014 \u0432\u0441\u0451 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, <b>r<\/b>(\u0440\u0430\u0434\u0438\u0443\u0441) \u0442\u043e\u0436\u0435 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432, \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043e\u043f\u0446\u0438\u044f <b>counterclockwise<\/b> \u2014 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e false = \u043f\u043e \u0447\u0430\u0441\u043e\u0432\u043e\u0439, true = \u043f\u0440\u043e\u0442\u0438\u0432 \u0447\u0430\u0441\u043e\u0432\u043e\u0439.<br \/>  <b>sAngle<\/b> \u0438 <b>eAngle<\/b> \u044d\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u043d\u0430 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 \u0440\u0430\u0434\u0438\u0430\u043d\u0430\u0445, \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0440\u0430\u0434\u0438\u0430\u043d\u044b \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442 \u0433\u0438\u0444\u043a\u0430:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d56\/158\/3e1\/d561583e1caf5d919bc19d3b9a7b307a.gif\" alt=\"image\"\/><\/p>\n<p>  \u0427\u0442\u043e \u0431\u044b \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u044b \u0432 \u0440\u0430\u0434\u0438\u0430\u043d\u044b \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443\u043b\u0443:  <\/p>\n<p><math><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/9dc\/041\/a12\/9dc041a128f9060223ec8630875d2ec1.svg\" alt=\"$radian=2*\u03c0*procent\/100$\" data-tex=\"display\"\/><\/math><\/p>\n<p>  \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0438 \u0432\u0441\u0451 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a.<\/p>\n<p>  html:  <\/p>\n<pre><code class=\"xml\">&lt;div class=&quot;dial blue&quot; data-width=&quot;180&quot; data-lineWidth=&quot;41&quot;&gt;66.233467&lt;\/div&gt;<\/code><\/pre>\n<p>  scss:  <\/p>\n<pre><code>.dial { \tborder-color: #22262f; \tcolor: #689F38; \tdisplay: inline-block; \ttext-align: left; \tp { \t\ttext-align:center; \t\tfont-weight: bold; \t\tcolor: #fff; \t\twhite-space: nowrap; \t\tposition: relative; \t\toverflow: hidden; \t\tz-index: 1; \t\tmargin: 0; \t} \tcanvas { \t\tposition: absolute; \t} } <\/code><\/pre>\n<p>  JavaScript + jQuery:  <\/p>\n<pre><code class=\"javascript\">$(function(){ \t\/\/ \u0418\u0449\u0435\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 class=&quot;dial&quot; \tvar dials = $(&quot;.dial&quot;); \t\/\/ \u041f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 .dial \u0438 \u043f\u0438\u0445\u0443\u0435\u043c \u0442\u0443\u0434\u0430 canvas \u0441 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u043c. \tfor (i=0; i &lt; dials.length; i++){ \t\tvar width = (typeof $(dials[i]).attr(&quot;data-width&quot;) != 'undefined') ? Math.round($(dials[i]).attr(&quot;data-width&quot;)) : 80; \t\tvar procent = (Number($(dials[i]).html()) &gt; 0 && Number($(dials[i]).html()) &lt; 100) ? Math.round(Number($(dials[i]).html()) * 10)\/10 : 0; \t\tvar lineWidth = (typeof $(dials[i]).attr(&quot;data-lineWidth&quot;) != 'undefined') ? Number($(dials[i]).attr(&quot;data-lineWidth&quot;)) : width \/ 10;                 if(lineWidth &gt;= width) lineWidth = width+1; \t\tvar size = width+lineWidth; \t\tvar lineRound = (typeof $(dials[i]).attr(&quot;data-lineRound&quot;) != 'undefined') ? true : false; \t\tvar borderColor = $(dials[i]).css(&quot;border-color&quot;); \t\tvar color = $(dials[i]).css(&quot;color&quot;); \t\t\/\/ \u041c\u0435\u043d\u044f\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 .dial \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 data-width=&quot;80&quot; \t\t\/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u044b \u043e\u043d \u0432\u043c\u0435\u0449\u0430\u043b\u0441\u044f \u0432 \u043a\u0440\u0443\u0433 \u043d\u0435 \u0437\u0430\u0434\u0435\u0432\u0430\u044f border \t\t$(dials[i]).css({&quot;width&quot;: size + 'px', &quot;height&quot;: size + 'px', &quot;font-size&quot;: Math.floor((width-lineWidth) \/ 4) + 'px'}); \t\t\/\/ \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c canvas \u0442\u0430\u043a\u043e\u0433\u043e \u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0447\u0442\u043e \u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c. \t\t$(dials[i]).html('&lt;canvas id=&quot;dial' + i + '&quot; width=&quot;' + size + '&quot; height=&quot;' + size + '&quot;&gt;&lt;\/canvas&gt;&lt;p&gt;' + procent + '%&lt;\/p&gt;'); \t\t\/\/ \u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \t\t$(&quot;p&quot;, dials[i]).css({&quot;line-height&quot;: size + 'px'}); \t\tvar canvas = document.getElementById(&quot;dial&quot; + i);     var context = canvas.getContext(&quot;2d&quot;); \t\t\/\/ \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u043f\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0435 \u0440\u0430\u0434\u0438\u0430\u043d\u044b \t\tvar radian = 2*Math.PI*procent\/100; \t\t\/\/ \u0440\u0438\u0441\u0443\u0435\u043c \u043a\u0440\u0443\u0433 \u0434\u043b\u044f \u0444\u043e\u043d\u0430 \t\tcontext.arc(width\/2+lineWidth\/2, width\/2+lineWidth\/2, width\/2, 0, 2*Math.PI, false); \t\tcontext.lineWidth = lineWidth; \t\tcontext.strokeStyle = borderColor; \t\tcontext.stroke(); \t\tcontext.beginPath(); \t\t\/\/ \u0440\u0438\u0441\u0443\u0435\u043c \u043a\u0440\u0443\u0433 \u0441 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u043c\u0438 \t\tcontext.arc(width\/2+lineWidth\/2, width\/2+lineWidth\/2, width\/2, 1.5 * Math.PI, radian+1.5 * Math.PI, false); \t\tcontext.strokeStyle = color; \t\t\/\/ \u041c\u043e\u0436\u043d\u043e \u0441\u043a\u0440\u0443\u0433\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u0446\u044b \u043e\u0442\u0440\u0435\u0437\u043a\u0430 \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043d \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 data-lineRound \t\tif (lineRound == true && lineWidth &lt; width) context.lineCap = &quot;round&quot;;     context.stroke(); \t} }); <\/code><\/pre>\n<p>  \u0447\u0442\u043e \u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0440\u0443\u0433\u043b\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a(?) \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443:   <\/p>\n<pre><code class=\"xml\">&lt;div class=&quot;dial&quot;&gt;\u043f\u0440\u043e\u0446\u0435\u043d\u0442\u044b (float)&lt;\/div&gt;<\/code><\/pre>\n<p>  \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c:<br \/>  <b>data-width<\/b> \u2014 \u0434\u0438\u0430\u043c\u0435\u0442\u0440 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 80)<br \/>  <b>data-lineWidth<\/b> \u2014 \u0448\u0438\u0440\u0438\u043d\u0430 \u043b\u0438\u043d\u0438\u0438 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 1\/10 \u043e\u0442 \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u0430)<br \/>  <i>* \u0440\u0430\u0437\u043c\u0435\u0440 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0440\u0430\u0432\u0435\u043d <b>data-width + data-lineWidth<\/b><\/i><br \/>  <b>data-lineRound<\/b> \u2014 \u043e\u043a\u0440\u0443\u0433\u043b\u044f\u0442\u044c \u043a\u0440\u0430\u044f \u043e\u0442\u0440\u0435\u0437\u043a\u0430.<\/p>\n<p>  \u043f\u0440\u043e\u0446\u0435\u043d\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u043a\u0440\u0443\u0433\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e \u0434\u0435\u0441\u044f\u0442\u044b\u0445, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438 \u0434\u043e \u0441\u043e\u0442\u044b\u0445, \u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u0448\u0440\u0438\u0444\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0432\u0441\u0435\u043c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439, \u0430 \u0448\u0440\u0438\u0444\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0430.<br \/>  \u0426\u0432\u0435\u0442\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0430 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u0441\u0442\u0438\u043b\u0438:  <\/p>\n<pre><code>\/* \u0440\u0430\u0437\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0441\u0445\u0435\u043c\u044b *\/ .dial { \t&.error { \t\tcolor: #d46d71; \t\tp { \t\t\tcolor: #d46d71; \t\t} \t} \t&.success { \t\tcolor: #689F38; \t\tborder-color: rgba(#d46d71, 0.4); \t\tp{ \t\t\tcolor: #689F38; \t\t} \t} \t&.blue { \t\tcolor: #1390d4; \t} } <\/code><\/pre>\n<p>   \u2014 \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u0442\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u0435\u0435, \u043d\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0446\u0432\u0435\u0442 \u0432 style=\u00abborder-color: ***; color: ***\u00bb<\/p>\n<p>  <a href=\"https:\/\/jsfiddle.net\/FunnyBanana\/3f48mz4L\/\">\u0414\u0435\u043c\u043e<\/a><\/p>\n<p>  \u0412\u0441\u0435\u043c \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habrahabr.ru\/post\/325428\/\"> https:\/\/habrahabr.ru\/post\/325428\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<h3>\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e!<\/h3>\n<p>  \u0421\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u044b \u0432 \u043a\u0440\u0443\u0433\u043b\u044b\u0445 \u0433\u0440\u0430\u0444\u0438\u043a\u0430\u0445(?)<br \/>  \u0418 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e \u044f \u043f\u0440\u0438\u043d\u044f\u043b\u0441\u044f \u0438\u0441\u043a\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043f\u0443\u0442\u043d\u043e\u0433\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c (\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u044f \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u0437\u043d\u0430\u044e \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f)<br \/>  \u0411\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0442\u043e \u0447\u0442\u043e \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u044f \u043d\u0430\u0448\u0435\u043b \u0432 <a href=\"http:\/\/www.htmldrive.net\/items\/demo\/1241\/jQuery-mousewheel-Knob-effect\">\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 Knob<\/a>, \u043d\u043e \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0438\u0437\u043b\u0438\u0448\u0435\u043d, \u0442.\u043a \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0437\u0430\u0442\u0435\u0441\u0430\u043b\u0441\u044f \u0431\u0430\u0433. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u043e\u0447\u0438\u043d\u044f\u0442\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d6b\/6c8\/c40\/d6b6c8c40565d65870a58434c44951cc.png\" alt=\"image\"\/><\/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-284296","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/284296","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=284296"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/284296\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=284296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=284296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=284296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}