--- title: CanvasRenderingContext2D.lineDashOffset slug: Web/API/CanvasRenderingContext2D/lineDashOffset tags: - API - Canvas - CanvasRenderingContext2D - JavaScript - Property - Reference translation_of: Web/API/CanvasRenderingContext2D/lineDashOffset ---
{{APIRef}}

Свойство CanvasRenderingContext2D.lineDashOffset в Canvas 2D API устанавливает смещение штрихов, или «фаза».

Примечание: Линии нарисованы вызовом метода  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}.

Синтаксис

ctx.lineDashOffset = value;
value
Число с плавающей запятой, определяющее величину смещения штрихов линии. Значением по умолчанию является 0,0.

Примеры

Смещение штрихов

Этот пример рисует две пунктирные линии. Первая не имеет смещения. Вторая имеет смещение 4.

HTML

<canvas id="canvas"></canvas>

JavaScript

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();

Результат

Линия со смещением будет нарисована красным цветом.

{{ EmbedLiveSample('Смещение_штрихов', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}

Эффект марширующих муравьёв

Эффект марширующих муравьёв - это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу..

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let offset = 0;

const draw = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10, 10, 100, 100);
}

const march = () => {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();

{{ EmbedLiveSample('Эффект_марширующих_муравьёв', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}

Спецификации

{{Specifications}}

Совместимость с браузерами

{{Compat}}

Специфичные для Gecko заметки

Специфичные для WebKit заметки

Смотрите также