CanvasRenderingContext2D.globalAlpha
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Свойство CanvasRenderingContext2D.globalAlpha
Canvas 2D API определяет альфа-(прозрачность) значение, которое будет применено к фигурам и картинкам до того как они будут отрисованы на холсте.
Примечание: Смотрите также Applying styles and color в Canvas Tutorial.
Синтаксис
ctx.globalAlpha = value;
Параметры
Примеры
Отрисовка полупрозрачных фигур
В этом примере используется свойство globalAlpha
для отрисовки двух полупрозрачных прямоугольников.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.globalAlpha = 0.5;
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
Результат
Наложение прозрачных фигур
Этот пример демонстрирует эффект наложения нескольких прозрачных фигур друг на друга. Мы начнём с отрисовки непрозрачного фона, состоящего из четырёх разноцветных квадратов. Далее мы устанавливаем свойство globalAlpha
равное 0.2
(20% прозрачности); Уровень прозрачности будет применён ко всем прозрачным фигурам. Затем мы используем цикл for
для отрисовки нескольких кругов с увеличивающимися радиусами.
Для каждого нового круга прозрачность кругов, находящихся под ним, уменьшается. Если вы увеличите количество шагов, тем самым увеличив количество кругов, фон в конечном итоге полностью исчезнет в центре изображения.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Рисуем фон
ctx.fillStyle = "#FD0";
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = "#6C0";
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = "#09F";
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = "#F30";
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = "#FFF";
// Устанавливаем уровень прозрачности
ctx.globalAlpha = 0.2;
// Рисуем круги
for (let i = 0; i < 7; i++) {
ctx.beginPath();
ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
ctx.fill();
}
Спецификации
Specification |
---|
HTML Standard # dom-context-2d-globalalpha-dev |
Совместимость с браузерами
BCD tables only load in the browser
Читайте также
- The interface defining this property:
CanvasRenderingContext2D
CanvasRenderingContext2D.globalCompositeOperation