CanvasRenderingContext2D.lineDashOffset

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

Примечание: Линии нарисованы вызовом метода 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();

Результат

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

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

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

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

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

Specification
HTML Standard
# dom-context-2d-linedashoffset-dev

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

BCD tables only load in the browser

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

  • mozDashOffset свойство будет объявлено устаревшим и будет удалено в будущем, смотрите баг 931643. Вместо него используйте lineDashOffset.

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

  • В браузерах на основе WebKit (например, Safari) помимо этого метода реализовано нестандартное и устаревшее свойство webkitLineDashOffset. Вместо него используйте lineDashOffset.

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