Ну, во-первых, вам нужно запрограммировать идею отслеживания отдельных фигур.Если вы этого еще не сделали, см. здесь для учебника.
Я думаю, что все ваши фигуры будут сохранены как изображения или полотна в памяти.Я не уверен, как еще вы можете это сделать.
Есть миллион способов сделать это, вот один из них:
Когда вы запускаете операцию рисования, вынужно определить, на какой форме вы находитесь.Затем вы рисуете эту форму на холсте в памяти и переключаете глобальную композиционную операцию временного холста на source-atop.Это позволит убедиться, что краска может рисовать только в уже непрозрачных областях этой формы (если это ваше намерение здесь, которое кажется).
Все, пока вы рисуете, вы захотите обновить временное полотнои перерисовывать основной холст постоянно.Пока вы перерисовываете основной холст, вместо рисования файла изображения этой фигуры вы захотите нарисовать временный холст (если вы используете холсты для сохранения форм, вы можете просто обновить их в реальном времени).
Есливы не используете временные холсты для каждой фигуры, когда вы останавливаете операцию рисования, вам нужно обновить изображение, связанное с формой, чтобы завершить операцию.
Использованиехолст в памяти (не добавляемый в DOM) для каждой фигуры (то есть размер фигуры и не больше) сделает кодирование немного проще и может не так уж плохо сказаться на производительности.Я бы попробовал использовать 100 и 1000 (или более) холстов в памяти на ваших целевых платформах, чтобы увидеть.
Альтернатива - использовать один холст в памяти и иметь HTMLImageElement (png)это представляет каждую фигуру, но использование функции canvas.toImageURL может немного подорвать производительность.Я бы попробовал оба метода, чтобы увидеть, какой из них лучше всего работает в вашем случае.Если число фигур достаточно мало, возможно, не имеет значения, какое именно.