CanvasRenderingContext2D: метод fill()
Базовая Широко поддерживается
Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
Метод CanvasRenderingContext2D.fill() API 2D-холста заполняет текущую или заданную траекторию текущей fillStyle.
Синтаксис
fill() fill(path) fill(fillRule) fill(path, fillRule)
Параметры
Возвращаемое значение
None (undefined).
Примеры
Заполнение прямоугольника
В этом примере используется метод fill() для заполнения прямоугольника.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 150, 100);
ctx.fill();
Результат
Указание траектории и fillRule
В этом примере некоторые пересекающиеся линии сохраняются в объекте Path2D. Метод fill() используется для рендеринга объекта на холсте. В центре объекта оставляется незаполненная область с помощью правила "evenodd"; по умолчанию (с правилом "nonzero") эта область также была бы заполнена.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Create path
let region = new Path2D();
region.moveTo(30, 90);
region.lineTo(110, 20);
region.lineTo(240, 130);
region.lineTo(60, 130);
region.lineTo(190, 20);
region.lineTo(270, 90);
region.closePath();
// Fill path
ctx.fillStyle = "green";
ctx.fill(region, "evenodd");
Результат
Спецификации
| Спецификация |
|---|
| HTML # dom-context-2d-fill-dev |
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
fill |
1 | 12 | 1.5 | ≤12.1 | 2 | 18 | 4 | ≤12.1 | 1 | 1.0 | 4.4 |
path_parameter |
36 | 14 | 31 | 23 | 7 | 36 | 31 | 24 | 7 | 3.0 | 37 |
См. также
- Интерфейс, определяющий этот метод:
CanvasRenderingContext2D CanvasRenderingContext2D.fillStyle
© 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/fill
