Создайте пошаговый щелчок по графике HTML5 / Javascript для инструмента обучения

Question

Я создаю учебный инструмент на HTML5 и Javascript, чтобы помочь пользователям понять, как работают алгоритмы голосования. Я буду проходить через каждый шаг, отображая какую-то графику или анимацию. По сути, я создаю HTML-версию этого: http://www.chrisgates.net/irv/votesequence.html

Есть идеи, как мне это сделать? Я экспериментировал с различными пакетами Canvas, которые рисуют графики и прочее, но ничего, что могло бы помочь пройти учебник.

Answer 1

По сути, вы хотите изменить содержимое некоторого HTML-элемента, основываясь на щелчках по кнопкам или другим HTML-элементам.

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

Когда вы используете Javascript, вы можете создавать скрытые элементы с нужными вам данными и показывать их, когда кто-то нажимает на определенную кнопку (которая может быть, но не обязательно должна быть внутри одного из других скрытых элементов).

Если вы действительно хотите использовать Canvas, я предлагаю вам взглянуть на Cake.js Это векторная библиотека холста, которая может создавать результаты, аналогичные инструменту Flash в вашей ссылке. Использовать его довольно просто, и есть (маленькая) вики, объясняющая основные вещи.