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

BCD tables only load in the browser

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.

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