Создание маски

Создание маски

О масках мы уже знаем из главы 21. В терминологии канвы так называется особая фигура, задающая своего рода "окно", сквозь которое будет видна часть графики, нарисованной на канве. Вся графика, не попадающая в это "окно", будет скрыта. При этом сама маска на канву не выводится.

Маской может быть только сложный контур, рисование которого описано ранее. И создается она примерно так же.

Вот последовательность действий.

1. Рисуем сложный контур, который станет маской.

2. Обязательно делаем его закрытым.

3. Вместо вызова методов stroke или fill вызываем метод clip, который не принимает параметров и не возвращает результата.

4. Рисуем графику, которая будет находиться под маской.

В результате нарисованная нами на шаге 4 графика будет частично видна сквозь маску. Требуемый результат достигнут.

Листинг 22.16 иллюстрирует пример.

Листинг 22.16

ctxCanvas.beginPath();

ctxCanvas.moveTo(100, 150);

ctxCanvas.lineTo(200, 0);

ctxCanvas.lineTo(200, 300);

ctxCanvas.closePath();

ctxCanvas.clip();

ctxCanvas.fillRect(0, 100, 400, 100);

Web-сценарий из листинга 22.16 сначала рисует маску в виде треугольника, а потом — прямоугольник, часть которого будет видна сквозь маску.