Можно ли установить фоновое изображение на холсте HTML5 и выполнять некоторые функции рисования, такие как Отмена, Стереть, Очистить, Сохранить это фоновое изображение?

Question

Я хочу знать о холсте HTML5. В моем базовом элементе холста я хочу установить фоновое изображение, и на этом я хочу выполнить некоторые функции, такие как рисование «Стереть», «Отменить», «Очистить» и сохранить полученное изображение (после применения всех эффектов «Отменить, очистить»). Любое предложение или пример ..

Answer 1

Вы можете нарисовать фон на холсте, используя drawImage (). Все дальнейшие манипуляции нарисованы поверх изображения.

Когда вы закончили свою работу, вы можете экспортировать Canvasstate в изображение.

Но вы должны держать историю для всех задач, потому что холст будет напрямую изменен.

Может пригодиться метод сохранения и восстановления.

Важно, чтобы вы сначала нарисовали свое изображение на холсте, чтобы все остальные эффекты влияли на изображение.

Answer 2

Самой простой и лучшей практикой исполнения было бы поместить этот фон как div за холст.

Answer 3

история API может использоваться для отмены и повтора.

Для сохранения изображения можно использовать метод toDataURL объекта Canvas.