Canvas - Визуализация графа цитирования

Визуализация в браузере производилась с помощью элемента <canvas> представленного в HTML5 и соответствующего JavaScript Canvas API. Элемент canvas позволяет отрисовывать на нем произвольную графику на ходу с помощью JavaScript. В нем уже есть встроенная поддержка таких графических элементов, как отрезок, прямоугольник, многоугольник и т. д. Также canvas поддерживает трансформации, основанные на матрицах перехода. Такие трансформации, как перемещение начала координат и увеличение/уменьшение позволяют реализовывать удобный пользовательский интерфейс для визуализации.

Альтернативой Canvas является векторный формат SVG. SVG представляет из себя <svg> элемент в HTML, внутри которого каждый графический элемент является отдельной DOM вершиной. Тем самым SVG позволяет удобно оперировать графическими элементами также, как и всеми остальными на странице. Однако узким местом данного подхода является скорость отрисовки, при анимации. В отличие от растрового canvas SVG при обновлении берет на себя дополнительно все накладные расходы по изменению DOM структуры и поэтому является менее предпочтительным в таких ситуациях.

Похожие статьи




Canvas - Визуализация графа цитирования

Предыдущая | Следующая