1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
---
title: CanvasRenderingContext2D.lineDashOffset
slug: Web/API/CanvasRenderingContext2D/lineDashOffset
tags:
- API
- Canvas
- CanvasRenderingContext2D
- JavaScript
- Property
- Reference
translation_of: Web/API/CanvasRenderingContext2D/lineDashOffset
---
<div>{{APIRef}}</div>
<div></div>
<p>Свойство <code><strong>CanvasRenderingContext2D.lineDashOffset</strong></code> в Canvas 2D API устанавливает смещение штрихов, или «фаза».</p>
<div class="blockIndicator note">
<p><strong>Примечание:</strong> Линии нарисованы вызовом метода {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}.</p>
</div>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox"><em>ctx</em>.lineDashOffset = <em>value</em>;
</pre>
<dl>
<dt><code>value</code></dt>
<dd>Число с плавающей запятой, определяющее величину смещения штрихов линии. Значением по умолчанию является 0,0.</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<h3 id="Смещение_штрихов">Смещение штрихов</h3>
<p>Этот пример рисует две пунктирные линии. Первая не имеет смещения. Вторая имеет смещение 4.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[15]">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();
</pre>
<h4 id="Результат">Результат</h4>
<p>Линия со смещением будет нарисована красным цветом.</p>
<p>{{ EmbedLiveSample('Смещение_штрихов', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}</p>
<h3 id="Эффект_марширующих_муравьев">Эффект марширующих муравьев</h3>
<p><a href="https://en.wikipedia.org/wiki/Marching_ants">Эффект марширующих муравьев</a> - это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу..</p>
<div class="hidden">
<h6 id="HTML_2">HTML</h6>
<pre class="brush: html"><canvas id="canvas"></canvas></pre>
</div>
<pre class="brush: 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();
</pre>
<p>{{ EmbedLiveSample('Эффект_марширующих_муравьев', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linedashoffset", "CanvasRenderingContext2D.lineDashOffset")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat("api.CanvasRenderingContext2D.lineDashOffset")}}</p>
<h3 id="Специфичные_для_Gecko_заметки">Специфичные для Gecko заметки</h3>
<ul>
<li><code>mozDashOffset</code> свойство будет объявлено устаревшим и будет удалено в будущем, смотрите {{bug(931643)}}. Вместо него используйте <code>lineDashOffset</code>.</li>
</ul>
<h3 id="Специфичные_для_WebKit_заметки">Специфичные для WebKit заметки</h3>
<ul>
<li>В браузерах на основе WebKit (например, Safari) помимо этого метода реализовано нестандартное и устаревшее свойство <code>webkitLineDashOffset</code>. Вместо него используйте <code>lineDashOffset</code>.</li>
</ul>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li>
<li>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Применение стилей и цвета</a></li>
</ul>
|
