CanvasRenderingContext2D: метод beginPath()
Базовый уровень Широко доступен
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.
Метод CanvasRenderingContext2D.beginPath() API Canvas 2D начинает новый путь, очищая список подпутей. Вызовите этот метод, когда хотите создать новый путь.
Примечание: Чтобы создать новый подпуть, т. е. подпуть, соответствующий текущему состоянию холста, вы можете использовать CanvasRenderingContext2D.moveTo().
Синтаксис
beginPath()
Параметры
Нет.
Возвращаемое значение
Нет (undefined).
Примеры
Создание отдельных путей
В этом примере создаются два пути, каждый из которых содержит одну линию.
HTML
<canvas id="canvas"></canvas>
JavaScript
Метод beginPath() вызывается перед началом каждой линии, чтобы их можно было нарисовать разными цветами.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// First path
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();
// Second path
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
Результат
Спецификации
| Спецификация |
|---|
| HTML # dom-context-2d-beginpath-dev |
Совместимость браузеров
| Настольные | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
beginPath |
1 | 12 | 1.5 | ≤12.1 | 2 | 18 | 4 | ≤12.1 | 1 | 1.0 | 4.4 |
См. также
- Интерфейс, определяющий этот метод:
CanvasRenderingContext2D CanvasRenderingContext2D.closePath()
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath
