English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
При рисовании форм на холсте HTML5 можно настроить, как комбинировать рисуемое содержимое с уже нарисованым содержимым на холсте. В этой статье рассказывается, как комбинировать рисуемое содержимое с уже нарисованым.
2D контекст имеет два атрибута, которые контролируют режим комбинирования холста. Это:
globalAlpha
globalCompositeOperation
Атрибут globalAlpha определяет прозрачность/непрозрачность рисуемого содержимого. Он может принимать значения от 0 до 1. Значение 0 означает, что рисуемое содержимое полностью прозрачно. Значение 0.5 означает, что рисуемое содержимое полупрозрачно. Значение 1 означает, что рисуемое содержимое непрозрачно. Предустановленное значение — 1.
Атрибут globalAlpha настроен следующим образом:
context.globalAlpha = 0.5;
Атрибут globalCompositeOperation определяет, как комбинировать рисуемое содержимое с уже нарисованым содержимым на холсте.
Атрибут globalCompositeOperation настроен следующим образом:
context.globalCompositeOperation = "copy";
globalCompositeOperation ссылается на «источник» и «цель» и определяет, как комбинировать источник и цель. Источник — это то, что вы рисуете, а цель — это то, что уже нарисовано. Вот список возможных значений и ихmeanings:
| Значение | Описание |
copy | На местах перекрытия источника и цели будет виден источник. |
destination-atop | Когда источник и цель перекрываются и оба не прозрачны, будет виден цель.Если цель прозрачна, будет виден источник. |
destination-in | На местах перекрытия источника и цели, где оба не прозрачны, будет виден цель.На местах без перекрытия источник не будет виден. |
destination-out | На местах, где источник и цель не перекрываются, будет виден цель.В других местах везде будет видна прозрачность. |
destination-over | На местах перекрытия источника и цели будет виден цель.Если нет перекрытия, будет виден источник. |
source-atop | На местах перекрытия источника и цели будет виден источник.На местах без перекрытия или когда источник прозрачен, будет виден цель. |
source-in | Когда источник и цель перекрываются и оба не прозрачны, будет виден источник.В других местах везде будет видна прозрачность. |
source-out | На местах, где источник и цель не перекрываются, будет виден источник.В других местах везде будет видна прозрачность. |
source-over | Если источник непрозрачен, отображается источник.Цель отображается в других местах. |
lighter | Источниковый и целевой цвета накладываются друг на друга, делая цвета ярче и направляясь к значению 1 (максимальной яркости этого цвета). |
xor |
Это пример канваса, где вы можете использовать режимы комpositing и значения alpha. Вы можете изменить режим комpositing, нажав на кнопку. Измените режим Alpha, используя控件 под канвасом.
globalAlpha
Если видите текстовое поле globalAlpha, введите значение от 0 до 100. Код преобразует значение в диапазон от 0 до 1.0. В противном случае используйте ползунок.
Внимание: при написании этой статьи Firefox и Chrome обрабатывают эти режимы комpositing по-разному. Также они似乎 отличаются от rects и text, как эти режимы работают. Пробуйте различные режимы в различных браузерах, которые вы планируете поддерживать, чтобы понять, как они работают.