Предыдущий ролик Следующий ролик  

Видео урок: Использование секущего контура

HTML5: графика и анимация с Canvas

HTML5 элемент canvas дает вам возможность создать то, что называется секущим контуром (clipping paths). Вы можете думать о секущем контуре как об обычной маске. Он определяет регион или границу, внутри которой будет происходить рисование, а вне которой рисование не будет иметь никакого эффекта. По умолчанию, изначально весь canvas является секущим контуром, это обозначает, что где бы вы ни рисовали в canvas, сколько он будет виден на экране, все это будет показано пользователю, пока вы рисуете. Вы можете создать секущий контур, используя любой контур, и это довольно просто сделать. Для этого нужна только одна функция, сначала вы рисуете обычный контур, а затем вызываете функцию clip, и все работает.

Давайте представим, что у нас есть фото, которое выглядит вот так. Мы применили секущий контур, который выглядит вот так. Итак в белой области будет показан рисунок, а в черной области рисунок будет заблокирован. Если бы мы нарисовали этот рисунок в canvas, используя секущий контур, он бы выглядел вот так. То есть, только часть рисунка, показанная в открытой области, будет нарисована в canvas. Чтобы сделать это, вы используете функцию clip. Функция clip создает новый секущий контур, высчитывая, как текущий режущий контур пересекается с областью, определенной текущим контуром.

А затем новый секущий контур просто заменяет текущий секущий контур, потому что у каждого контекста может быть только один секущий контур. В коде это будет выглядеть вот так. Вот canvas, и представьте, что у вас есть код, который выглядит вот так. Итак, мы определяем контур, а затем мы делаем дугу, потом вызываем stroke. В результате мы получаем круг, который выглядит вот так. Если теперь мы вызовем функцию clip для контекста canvas, тогда рисование будет происходить только внутри дуги. Давайте рассмотрим это в коде.

Вот я в редакторе, файл snippets открыт в разделе clipping paths. Открываю пример clipping_start. И вот что мы сделаем. Во-первых, давайте перейдем в snippets и скопируем эти первые строки. Копируем их и вставляем. Немного прокручиваем вниз и видим вызов drawImage. Копируем его и вставляем. Сохраняем. Давайте посмотри, как это выглядит в браузере.

Переношу clipping_start в браузер. Вы видите, что текущий секущий контур на данный момент - это весь canvas; ничего не заблокировано. То есть, весь рисунок заполняет canvas. Давайте вернемся к коду, и этот рисунок, кстати, вот здесь в документе. Итак, я просто получаю рисунок и отображаю его в canvas. Мы это уже видели, ничего нового. Давайте вернемся в snippets и попробуем создать секущий контур. Начнем мы с круглого секущего контура. Это то, что я уже показал в слайдах.

Я вставляю это и убираю комментарии с данных двух строк. Прежде чем мы запустим код, давайте я вам немного поясню. Этот код нарисует дугу в центре canvas. Мы делим ширину на 2 и высоту на 2. Получаем середину canvas. Радиус составляет 150 пикселей, и это полный и завершенный круг. Итак, у нас есть полный круг в середине canvas, а вот этот вызов функции здесь очень важен. Тогда создается секущий контур из текущего контура. Давайте сделаем это.

Сохраняем и обновляем страницу. Вы видите результат: в середине canvas есть круг, и только в том месте, где располагается этот круг, вырисовывается изображение; с другой стороны изображение маскируется. Это довольно легкий и простой пример, а сейчас давайте немного все усложним. Возвращаемся к коду, давайте снова закомментируем эти две строки. Идем в snippets. Давайте создадим произвольный секущий контур.

Все то, что мы знаем о создании контуров, может быть применено к секущим контурам. Вот здесь у нас вызов beginpath, у нас есть ряд линий, затем мы закрываем контур и вызываем clip. Таким образом будет создан секущий контур из произвольного контура, который я создал несколькими линейными сегментами. Это будет четыре линейных сегмента: один, второй, третий, а затем closePath создаст последний. Сохраняем, обновляем. Вы видите, что секущий контур изменился, здесь четыре точки, которые я использовал при создании контура.

Я использовал обычный контур, я его не обрамлял, хотя и мог бы это сделать, если бы захотел, и из него я сделал секущий контур. Давайте посмотрим, работает ли это в других браузерах. Давайте откроем это пример в Firefox. Вы видите, что результат тот же. В этом примере мы увидели, как из обычного контура создать секущий контур, которые являются масками, внутри которых происходит рисование, а вне которых - нет.