Во-первых, чтобы прояснить одну вещь, сам холст не очень много знает о том, что на нем. Он может сказать вам, какого цвета пиксель, но он не может сказать вам, прямоугольник здесь или круг. Для нашей цели, рассмотрим холст только для записи. Такая функциональность существует в SVG, если вы хотите рассмотреть ее для своего приложения, с оговоркой, что холст поддерживается более универсально.
Знание того, что находится под мышкой, действительно относится к тому, что ваше приложение В приведенном вами примере разработчик взял координаты X и Y из события мыши (используя jQuery) и быстро вычислил, в какой строке и столбце вы находитесь. Затем он может применить это к высказыванию "cell (x) , у) только что размышлял, когда вы делаете следующую перерисовку, учтите это. "
Приложения Canvas обычно работают следующим образом:
- Создание среды полностью на JavaScript (с массивами, объектами и т. Д.).
- Используйте процедуру рендеринга, чтобы нарисовать среду на холсте.
- Прослушивание событий мыши, таймеров и т. Д.
- Проверьте, как событие влияет на окружающую среду.
- Применение изменений к среде.
- Повторно используйте процедуру рендеринга из шага 2, чтобы обновить холст новой средой.
- Перейти к шагу 3.
Имея это в виду, любое руководство должно быть полезным, будь то для Java, .Net, Android и т. Д. Все они имеют свои собственные поверхности рисования и учебные пособия, которые основаны на них.
Что касается холста, вот забавный урок: http://billmill.org/static/canvastutorial/index.html
Учебник строит игру-прорыв, которая слушает события мыши и таймера. Событие мыши не выполняет никакой проверки, чтобы увидеть, чем оно закончилось, но событие таймера выполняет некоторую работу, чтобы проверить, существует ли шар в том же пространстве, что и блок или весло, и соответственно обновляет холст и среду JavaScript.