From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../linedashoffset/index.html | 149 +++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html (limited to 'files/ru/web/api/canvasrenderingcontext2d/linedashoffset') diff --git a/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html new file mode 100644 index 0000000000..ec4db4e6e2 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html @@ -0,0 +1,149 @@ +--- +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') }}

+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linedashoffset", "CanvasRenderingContext2D.lineDashOffset")}}{{Spec2('HTML WHATWG')}}
+ +

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

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineDashOffset")}}

+ +

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

+ + + +

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

+ + + +

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

+ + -- cgit v1.2.3-54-g00ecf