Рисование линий на сетке

Question

У меня есть изображение с линиями сетки, и я хотел бы позволить пользователю рисовать более толстые линии на этих линиях сетки, и каждая линия должна переходить от одного пересечения к другому.Где я должен начать свое исследование?Я понимаю, что это, вероятно, очень широкий вопрос, я просто ищу немного направления здесь.Ищите решения для php и jquery / javascript.

Большая благодарность, Тодд

Answer 1

Вы можете использовать элемент <canvas>.

1. Загрузить свое изображение на холст, используя .drawImage().
2. Создать обработчик onclick для холста и нарисовать линии.
3. Сохраните вывод с холста в изображение, используя toDataURL().

Ссылки:

• Этот ответ демонстрирует рисование изображенийна холст и получение результата с помощью .toDataURL().

• Этот ответ содержит код для получения координат щелчка на холсте.

Обновление:

В качестве бонуса: ЗДЕСЬ - это код для игры :).Рисование есть, но привязка к сетке должна быть добавлена.Протестировано с Chrome и Firefox.