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

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

Спецификация Статус Комментарий
HTML Living Standard
Определение 'CanvasRenderingContext2D.lineDashOffset' в этой спецификации.
Живой стандарт

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
lineDashOffsetChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 27
Полная поддержка 27
Полная поддержка 7
Альтернативное имя
Альтернативное имя Использует нестандартное имя: mozDashOffset
IE Полная поддержка 11Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 27
Полная поддержка 27
Полная поддержка 7
Альтернативное имя
Альтернативное имя Использует нестандартное имя: mozDashOffset
Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Использует нестандартное имя.
Использует нестандартное имя.

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

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

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

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

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

Метки документа и участники

Внесли вклад в эту страницу: faramozzayw
Обновлялась последний раз: faramozzayw,