initial commit

1 files changed, 149 insertions, 0 deletions

diff --git a/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html
new file mode 100644
index 0000000000..ec4db4e6e2
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html
@@ -0,0 +1,149 @@
+---
+title: CanvasRenderingContext2D.lineDashOffset
+slug: Web/API/CanvasRenderingContext2D/lineDashOffset
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - JavaScript
+  - Property
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/lineDashOffset
+---
+<div>{{APIRef}}</div>
+
+<div></div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D.lineDashOffset</strong></code> в Canvas 2D API устанавливает смещение штрихов, или «фаза».</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Линии нарисованы вызовом метода  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.lineDashOffset = <em>value</em>;
+</pre>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Число с плавающей запятой, определяющее величину смещения штрихов линии. Значением по умолчанию является 0,0.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Смещение_штрихов">Смещение штрихов</h3>
+
+<p>Этот пример рисует две пунктирные линии. Первая не имеет смещения. Вторая имеет смещение 4.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[15]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.setLineDash([4, 16]);
+
+// Пунктирная линия без смещения
+ctx.beginPath();
+ctx.moveTo(0, 50);
+ctx.lineTo(300, 50);
+ctx.stroke();
+
+// Пунктирная линия со смещением 4
+ctx.beginPath();
+ctx.strokeStyle = 'red';
+ctx.lineDashOffset = 4;
+ctx.moveTo(0, 100);
+ctx.lineTo(300, 100);
+ctx.stroke();
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>Линия со смещением будет нарисована красным цветом.</p>
+
+<p>{{ EmbedLiveSample('Смещение_штрихов', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}</p>
+
+<h3 id="Эффект_марширующих_муравьев">Эффект марширующих муравьев</h3>
+
+<p><a href="https://en.wikipedia.org/wiki/Marching_ants">Эффект марширующих муравьев</a> - это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу..</p>
+
+<div class="hidden">
+<h6 id="HTML_2">HTML</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let offset = 0;
+
+const draw = () =&gt; {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+const march = () =&gt; {
+  offset++;
+  if (offset &gt; 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+</pre>
+
+<p>{{ EmbedLiveSample('Эффект_марширующих_муравьев', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linedashoffset", "CanvasRenderingContext2D.lineDashOffset")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineDashOffset")}}</p>
+
+<h3 id="Специфичные_для_Gecko_заметки">Специфичные для Gecko заметки</h3>
+
+<ul>
+ <li><code>mozDashOffset</code>  свойство будет объявлено устаревшим и будет удалено в будущем, смотрите {{bug(931643)}}. Вместо него используйте <code>lineDashOffset</code>.</li>
+</ul>
+
+<h3 id="Специфичные_для_WebKit_заметки">Специфичные для WebKit заметки</h3>
+
+<ul>
+ <li>В браузерах на основе WebKit (например, Safari) помимо этого метода реализовано нестандартное и устаревшее свойство <code>webkitLineDashOffset</code>. Вместо него используйте <code>lineDashOffset</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Применение стилей и цвета</a></li>
+</ul>