HTML5 Canvas 5 получает новые функции

2D рабочая лошадка веб-холста находится на пути к версии 5 с некоторыми интересными новыми функциями. Что удивительно, так это то, насколько сложны эти функции — это говорит о том, что элемент Canvas теперь достаточно зрелый.

Большинство дополнений попадают в категорию «удобных», но не существенных. Например, теперь есть команда рисования эллипса. Вы могли создать эллипс раньше, но не напрямую, и это включало много странной геометрии с кривыми Безье.

Еще одно приятное дополнение — примитив пути. Теперь вы можете создать объект пути, определить путь и затем отобразить путь к холсту. Это означает, что вы можете поддерживать несколько путей, а не только один. Теперь вы также можете использовать мини-язык SVG для пути, например. «M 100,100 H 50 V 50» и так далее. Вы также можете применить преобразование SVG к путям, определенным таким образом.

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

Важным дополнением является возможность определять «области попадания». Это позволяет указать произвольную область для реакции на пользовательские события. Другими словами, вы можете определять горячие точки на графике. Все, что вам нужно сделать, это определить путь и добавить HitRegion перед его закрытием. Например:

context.beginPath ();

context.rect (10,10,100,100);

context.fill ();

context.addHitRegion ({id: ‘Первая кнопка’});

Это создает прямоугольную область, которая будет реагировать на щелчок по ней пользователем, генерируя событие. Да, он действует как кнопка на вашем графике. В будущем вам не придется создавать аналогичные функции, располагая элементы с возможностью нажатия перед элементом Canvas. Вы можете определить, какая область была нажата, изучив аргументы события, переданные обработчику событий Canvas. Вы также можете указать автоматические изменения курсора, если пользователь перемещает курсор по области нажатия, чтобы они знали, что это область, доступная для щелчка.

Есть и другие незначительные дополнения — больше метрик в MeasureText, возможность преобразовывать шаблон, сброс для области клипа и преобразование.

Будем надеяться, что новые функции Canvas появятся в браузерах как можно скорее.