CanvasRenderingContext2D: свойство globalAlpha

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

Число от 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");

// Draw background
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";

// Set transparency value
ctx.globalAlpha = 0.2;

// Draw transparent circles
for (let i = 0; i < 7; i++) {
  ctx.beginPath();
  ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
  ctx.fill();
}

• Начиная с Gecko 5.0, указание недопустимых значений для globalAlpha больше не вызывает исключение SYNTAX_ERR; теперь они корректно игнорируются.

• В браузерах на основе WebKit и Blink реализован нестандартный и устаревший метод ctx.setAlpha() в дополнение к этому свойству.

• Интерфейс, определяющий это свойство: CanvasRenderingContext2D
• CanvasRenderingContext2D.globalCompositeOperation