CanvasRenderingContext2D.lineDashOffset
Свойство 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 Standard # dom-context-2d-linedashoffset-dev |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Интерфейс, определяющий это свойство:
CanvasRenderingContext2D
CanvasRenderingContext2D.getLineDash()
CanvasRenderingContext2D.setLineDash()
(en-US)- Применение стилей и цвета