CanvasRenderingContext2D.lineDashOffset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Примечание: Линии нарисованы вызовом метода stroke().

Синтаксис

ctx.lineDashOffset = value;
value

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

Примеры

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

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

HTML

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

JavaScript

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

Результат

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

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

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

js
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
# dom-context-2d-linedashoffset-dev

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

BCD tables only load in the browser

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