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 Ð¸ÑÐ»Ñ 2015 Ð³..

Ð¡Ð²Ð¾Ð¹ÑÑÐ²Ð¾ CanvasRenderingContext2D.lineDashOffset Ð² Canvas 2D API ÑÑÑÐ°Ð½Ð°Ð²Ð»Ð¸Ð²Ð°ÐµÑ ÑÐ¼ÐµÑÐµÐ½Ð¸Ðµ ÑÑÑÐ¸ÑÐ¾Ð², Ð¸Ð»Ð¸ Â«ÑÐ°Ð·Ð°Â».

Ð¡Ð¸Ð½ÑÐ°ÐºÑÐ¸Ñ

ctx.lineDashOffset = value;

value: Ð§Ð¸ÑÐ»Ð¾ Ñ Ð¿Ð»Ð°Ð²Ð°ÑÑÐµÐ¹ Ð·Ð°Ð¿ÑÑÐ¾Ð¹, Ð¾Ð¿ÑÐµÐ´ÐµÐ»ÑÑÑÐµÐµ Ð²ÐµÐ»Ð¸ÑÐ¸Ð½Ñ ÑÐ¼ÐµÑÐµÐ½Ð¸Ñ ÑÑÑÐ¸ÑÐ¾Ð² Ð»Ð¸Ð½Ð¸Ð¸. ÐÐ½Ð°ÑÐµÐ½Ð¸ÐµÐ¼ Ð¿Ð¾ ÑÐ¼Ð¾Ð»ÑÐ°Ð½Ð¸Ñ ÑÐ²Ð»ÑÐµÑÑÑ 0,0.

ÐÑÐ¸Ð¼ÐµÑÑ

Ð¡Ð¼ÐµÑÐµÐ½Ð¸Ðµ ÑÑÑÐ¸ÑÐ¾Ð²

HTML

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

Ð ÐµÐ·ÑÐ»ÑÑÐ°Ñ

ÐÑÑÐµÐºÑ Ð¼Ð°ÑÑÐ¸ÑÑÑÑÐ¸Ñ Ð¼ÑÑÐ°Ð²ÑÑÐ²

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

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