---
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>