CanvasRenderingContext2D.globalAlpha
Свойство 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();
}
Screenshot | Live sample |
---|---|
![]() |
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard Определение 'CanvasRenderingContext2D.globalAlpha' в этой спецификации. |
Живой стандарт |
Browser compatibility
BCD tables only load in the browser
Gecko-specific notes
- Starting with Gecko 5.0, specifying invalid values for
globalAlpha
no longer throws aSYNTAX_ERR
exception; these are now correctly silently ignored.
WebKit/Blink-specific notes
- In WebKit- and Blink-based browsers, a non-standard and deprecated method
ctx.setAlpha()
is implemented in addition to this property.
Читайте также
- The interface defining this property:
CanvasRenderingContext2D
CanvasRenderingContext2D.globalCompositeOperation
(en-US)