CanvasRenderingContext2D.globalAlpha

Свойство CanvasRenderingContext2D.globalAlpha Canvas 2D API определяет альфа-(прозрачность) значение, которое будет применено к фигурам и картинкам до того как они будут отрисованы на холсте.

Смотрите также Applying styles and color в Canvas Tutorial.

Синтаксис

ctx.globalAlpha = value;

Параметры

value
Число между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность), включительно. Дефолтное значение 1.0. Значение, не входящее в указанный диапазон, включая Infinity и NaN, не будут применены, и globalAlpha сохранит предыдущее значение или значение по-умолчанию.

Примеры

Отрисовка полупрозрачных фигур

В этом примере используется свойство 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();
}
ScreenshotLive sample

Specifications

Specification Status Comment
HTML Living Standard
Определение 'CanvasRenderingContext2D.globalAlpha' в этой спецификации.
Живой стандарт  

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
globalAlphaChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

Gecko-specific notes

  • Starting with Gecko 5.0, specifying invalid values for globalAlpha no longer throws a SYNTAX_ERR exception; these are now correctly silently ignored.
  • In WebKit- and Blink-based browsers, a non-standard and deprecated method ctx.setAlpha() is implemented in addition to this property.

Читайте также